Question

我放弃了，我无法弄清楚我试图用3d.js创建一个条形图，但我无法让它工作。可能我不太了解处理我的复杂关联数组。

我的数组具有以下结构：

{"January"=>{"fail"=>13, "success"=>6},  
 "February"=>{"success"=>10, "fail"=>4},  
 "March"=>{"success"=>9, "fail"=>13},  
 "April"=>{"success"=>16, "fail"=>5},   
 "May"=>{"fail"=>52, "success"=>23},   
 "June"=>{"fail"=>7, "success"=>2},   
 "July"=>{},  
 "August"=>{"fail"=>6, "success"=>3},  
 "September"=>{"success"=>54, "fail"=>59},   
 "October"=>{"success"=>48, "fail"=>78},  
 "November"=>{"fail"=>4, "success"=>6},  
 "December"=>{"fail"=>1, "success"=>0}}`

我显示轴工作： enter image description here

代码看起来很丑，因为我将名称转换为“普通”数组：

monthsNames = new Array();
i = 0;
for (key in data) {
  monthsNames[i] = key;
  i++;
}

x.domain(monthsNames);
y.domain([0, 100]);

但我无法弄清楚如何处理数据。

我尝试了类似svg.selectAll(".bar").data(d3.entries(data))的内容我猜是一个好的开始，但我无法与轴工作连接。

我想要创建的是bar-chart，其中月份为x轴，每个月有两个小节（分别是一个有两种颜色的小节） - 一个用于成功，一个用于失败。

有人可以帮我解决数据处理方法吗？提前谢谢！

编辑：

我无法弄清楚如何缩放x和y。如果我使用此代码：

var x = d3.scale.ordinal()
   .domain(monthsNames)
   .range([0, width]);

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

然后没有出现任何内容。如果我打印出使用后评估的值，例如x（d.key）或x（d.value.fail）它们是非常奇怪的数字，有时甚至是NaN。

编辑：

d3.selectAll(".barsuccess")
      .on('mouseover', function(d){
                    svg.append('text')
                    .attr("x", x(d.key))
                    .attr("y", y(d.value.success))
                    .text(d.value.success+"%")
                    .attr('class','success')
                    .style("font-size","0.7em")
                })
                .on('mouseout', function(d){
                    d3.selectAll(".success").remove()
                });  


d3.selectAll(".barfail")
          .on('mouseover', function(d){
                        svg.append('text')
                        .attr("x", x(d.key)+x.rangeBand()/2)
                        .attr("y", y(d.value.fail))
                        .text(d.value.fail+"%")
                        .attr('class','fail')
                        .style("font-size","0.7em")
                    })
                    .on('mouseout', function(d){
                        d3.selectAll(".fail").remove()
                    });

Answer 1

请务必查看条形图教程here和here。你基本上已经拥有了所有你需要的。轴和数据之间的连接是将输入值（例如“March”）映射到输出坐标（例如125）的函数。您（大概）使用d3.scale.*创建了这些函数。现在您只需使用相同的函数将数据映射到SVG中的坐标。

您需要添加的代码的基本结构如

svg.selectAll(".barfail").data(d3.entries(data))
   .enter().append("rect")
   .attr("class", "barfail")
   .attr("x", function(d) { x(d.key) })
   .attr("width", 10)
   .attr("y", function(d) { y(d.value.fail) })
   .attr("height", function(d) { y(d.value.fail) });

和success类似。如果对两种类型的条使用相同的x轴刻度，请为其中一个条添加常量偏移，以使条不重叠。颜色等可以在CSS类中设置。

带有d3.js和关联数组的条形图

1 个答案: