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

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}}`

我得到了轴工作的显示：

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

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 类中设置。