Javascript 使用d3.js制作条形图_Javascript_Json_D3.js_Bar Chart

Javascript 使用d3.js制作条形图

javascript json d3.js

Javascript 使用d3.js制作条形图,javascript,json,d3.js,bar-chart,Javascript,Json,D3.js,Bar Chart,我的数据如下： var chartData = [[9.402974983096687, "Asian"], [10.762177012177013, "Black"], [12.213470319634704, "Chinese"], [11.211221431247658, "Hispanic"], [9.18421052631579, "American Indian"], [12.36144578313253, "Japanese"], [14.659334126040427, "Oth

我的数据如下：

var chartData = [[9.402974983096687, "Asian"], [10.762177012177013, "Black"], [12.213470319634704, "Chinese"], [11.211221431247658, "Hispanic"], [9.18421052631579, "American Indian"], [12.36144578313253, "Japanese"], [14.659334126040427, "Other"], [7.5, "Portuguese"], [10.636304446904095, "White"]];

chartData.map(function(e, i) {
  facebook_usage.push(e[0]);
  ethinicity.push(e[1]);
  }

var chartData = create_JSON(facebook_usage,ethinicity) {

    --not sure how to frame this function                 }

我正在尝试将其转换为以下格式：

      [
{
    "Ethinicity": "Asian",
    "Facebook_usage": 9.40
},
{
    "Ethinicity" : "Black",
    "Freq": 12.213470319634704
},
{
    "Ethinicity":"Chinese"
    "Freq": 12.213470319634704
},

----]

然后，用这个做一个条形图。尝试使用映射函数，如下所示：

var chartData = [[9.402974983096687, "Asian"], [10.762177012177013, "Black"], [12.213470319634704, "Chinese"], [11.211221431247658, "Hispanic"], [9.18421052631579, "American Indian"], [12.36144578313253, "Japanese"], [14.659334126040427, "Other"], [7.5, "Portuguese"], [10.636304446904095, "White"]];

chartData.map(function(e, i) {
  facebook_usage.push(e[0]);
  ethinicity.push(e[1]);
  }

var chartData = create_JSON(facebook_usage,ethinicity) {

    --not sure how to frame this function                 }

以下是绘制条形图的其余代码：

    var margin = {top: 20, right: 20, bottom: 70, left: 40},
    width = 600 - margin.left - margin.right,
    height = 300 - margin.top - margin.bottom;


// set the ranges
var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);

var y = d3.scale.linear().range([height, 0]);

// define the axis
var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")


var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(10);


// add the SVG element
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", 
          "translate(" + margin.left + "," + margin.top + ")");


// load the data


    chartData.forEach(function(d) {
        d.ethinicity = d.ethinicity;
        d.facebook_usage = d.facebook_usage;
    });

  // scale the range of the data
  x.domain(data.map(function(d) { return d.ethinicity; }));
  y.domain([0, d3.max(data, function(d) { return d.facebook_usage; })]);

  // add axis
  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
    .selectAll("text")
      .style("text-anchor", "end")
      .attr("dx", "-.8em")
      .attr("dy", "-.55em")
      .attr("transform", "rotate(-90)" );

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 5)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Frequency");


  // Add bar chart
  svg.selectAll("bar")
      .data(chartData)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(d.ethinicity); })
      .attr("width", x.rangeBand())
      .attr("y", function(d) { return y(d.facebook_usage); })
      .attr("height", function(d) { return height - y(d.facebook_usage); });

仍然在努力找到d3.js的方法。下面是代码中存在的几个问题

在设置x和y域时，您正在使用变量

data

。但是，该变量没有在任何地方定义，这就是为什么没有生成图表的原因

您正在定义2个数组，并尝试进行两次数据映射。您可以删除第一步。执行以下操作就足够了

// directly map your data  
chartData.forEach(function(d) {
  d.ethinicity = d[1];
  d.facebook_usage = +d[0];
});

检查下面的嵌入代码段

另外，您的x轴定位已关闭，您可能需要对其进行调整

var chartData=[
[9.402974983096687，“亚洲”]，
[10.762177012177013，“黑色”]，
[12.21347019634704，“中文”]，
[11.211221431247658，“西班牙裔”]，
[9.18421052631579，“美洲印第安人”]，
[12.36144578313253，“日语”]，
[14.659334126040427，“其他”]，
[7.5，“葡萄牙语”]，
[10.63630446904095，“白色”]
];
//不需要做下面的事情
/*
var\u使用率=[]；
风险值ethinicity=[]；
chartData.map（函数（e，i）{
facebook_usage.push（e[0]）；
推（e[1]）；
});
//console.log（图表数据）；
*/
var保证金={
前20名，
右:20,，
底数：70，
左：40
},
宽度=600-边距。左侧-边距。右侧，
高度=300-margin.top-margin.bottom；
//设定范围
var x=d3.scale.ordinal（）.rangeRoundBands（[0，宽度]，.05）；
变量y=d3.scale.linear（）.range（[height，0]）；
//定义轴
var xAxis=d3.svg.axis（）
.比例（x）
.orient（“底部”）
var yAxis=d3.svg.axis（）
.比例（y）
.东方（“左”）
.蜱（10）；
//添加SVG元素
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
//加载数据
//直接将数据映射到此处
chartData.forEach（函数（d）{
d、 乙炔度=d[1]；
d、 facebook_使用率=+d[0]；
});
//console.log（图表数据）；
//缩放数据的范围
x、 域（chartData.map）（函数（d）{
返回d.ethinicity；
}));
y、 域（[0，d3.max（图表数据，函数（d））{
返回d.u用法；
})]);
//添加轴
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）
.selectAll（“文本”）
.style（“文本锚定”、“结束”）
.attr（“dx”，“-.8em”）
.attr（“dy”，“-.55em”）
.attr（“平移”、“旋转（-90）”）；
svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）
.append（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，5）
.attr（“dy”，“.71em”）
.style（“文本锚定”、“结束”）
.文本（“频率”）；
//添加条形图
svg.selectAll（“条”）
.数据（图表数据）
.enter（）.append（“rect”）
.attr（“类”、“条”）
.attr（“x”，函数（d）{
返回x（d.乙炔度）；
})
.attr（“宽度”，x.rangeBand（））
.attr（“y”，函数（d）{
返回y（d.u用法）；
})
.attr（“高度”，功能（d）{
返回高度-y（d.u用法）；
});
.bar{
填充：钢蓝；
}
.bar:悬停{
填充物：棕色；
}
.安讯士{
字体：10px无衬线；
}
.轴线路径，
.轴线{
填充：无；
行程：#000；
形状渲染：边缘清晰；
}
您的代码中现在有几个问题
在设置x和y域时，您正在使用变量data
。但是，该变量没有在任何地方定义，这就是为什么没有生成图表的原因
您正在定义2个数组，并尝试进行两次数据映射。您可以删除第一步。执行以下操作就足够了
// directly map your data  
chartData.forEach(function(d) {
  d.ethinicity = d[1];
  d.facebook_usage = +d[0];
});


检查下面的嵌入代码段
另外，您的x轴定位已关闭，您可能需要对其进行调整

var chartData=[
[9.402974983096687，“亚洲”]，
[10.762177012177013，“黑色”]，
[12.21347019634704，“中文”]，
[11.211221431247658，“西班牙裔”]，
[9.18421052631579，“美洲印第安人”]，
[12.36144578313253，“日语”]，
[14.659334126040427，“其他”]，
[7.5，“葡萄牙语”]，
[10.63630446904095，“白色”]
];
//不需要做下面的事情
/*
var\u使用率=[]；
风险值ethinicity=[]；
chartData.map（函数（e，i）{
facebook_usage.push（e[0]）；
推（e[1]）；
});
//console.log（图表数据）；
*/
var保证金={
前20名，
右:20,，
底数：70，
左：40
},
宽度=600-边距。左侧-边距。右侧，
高度=300-margin.top-margin.bottom；
//设定范围
var x=d3.scale.ordinal（）.rangeRoundBands（[0，宽度]，.05）；
变量y=d3.scale.linear（）.range（[height，0]）；
//定义轴
var xAxis=d3.svg.axis（）
.比例（x）
.orient（“底部”）
var yAxis=d3.svg.axis（）
.比例（y）
.东方（“左”）
.蜱（10）；
//添加SVG元素
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
//加载数据
//直接将数据映射到此处
chartData.forEach（函数（d）{
d、 乙炔度=d[1]；
d、 facebook_使用率=+d[0]；
});
//console.log（图表数据）；
//缩放数据的范围
x、 域（chartData.map）（函数（d）{
返回d.ethinicity；
}));
y、 域（[0，d3.max（图表数据，函数（d））{
返回d.u用法；
})]);
//添加轴
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）
.selectAll（“文本”）
.style（“文本锚定”、“结束”）
.attr（“dx”，“-.8em”）
.attr（“dy”，“-.55em”）
.attr（“平移”、“旋转（-90）”）；
svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）
.append（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，5）
.attr（“dy”，“.71em”）
.style（“文本锚定”、“结束”）
.文本（“频率”）；
//