javascript - 带有 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) });

和成功类似。如果您对两种类型的条形图的 x 轴使用相同的比例，请向其中一种添加常量偏移量，这样条形图就不会重叠。可以在 CSS 类中设置颜色等。