基于自定义 d3.js 的可视化问题

Question

我正在学习 d3.js，需要创建一个可视化镜像，以反映我在下面的小提琴中包含的示例图像。

http://jsfiddle.net/mike_ellan/37PYJ/

我知道如何创建和绑定文本元素，并计划为圆圈内的标签这样做，但我很难弄清楚我应该如何使用这种特定的数据结构来做这件事。我没有选择请求更扁平的 json 结构的选项，因此我必须按原样正确映射它。这是我开始的数据：

var consumption = [
{
    "fruits": [
        {
            "year":"2011",
            "apples":"213",
            "oranges":"176",
            "pears":"987"
        },
        {
            "year":"2012",
            "apples":"199",
            "oranges":"234",
            "pears":"672"
        }
    ]
}
];

至于年份，我的计划是生成一个 2 行/列的表，然后根据 json 中返回的内容为每年添加一列。你能给我一些提示或指导我如何实现这一目标吗？

Answer 1

Mike 这是制作图表的快捷方式。

创建列并附加标题

// Group Columns
var columns = groupColumn.selectAll("g")
                                    .data(consumption[0].fruits)
                                    .enter()
                                    .append("g")
                                    .attr("class", function(d,i) { return "column - " + i });
              // Append year
              columns.append("text")
                             .attr("transform", function(d,i) { return "translate(" + i*(width/2) + "," + height/2 + ")"; })
                             .text(function(d) {return d.year });  

创建行和附加字段

 // Append row
var groupRow = columns.append("g")
                             .attr("class", "fruits")
                             .attr("transform", function(d,i) { return "translate(" + i*(width/2) + "," + height/2 + ")"; })

 // Append fields of row
var rows =   groupRow.selectAll("circle")
                               .data(function(d) {return d3.entries(d).filter(function(d) { return d.key !== "year"; })})
                               .enter()
                               .append("circle")
                                    .attr("cx",function(d,i){ return (60 * i) + 30 } )
                                     .attr("cy",50)
                                     .attr("r",25)
                                     .attr("fill", function(d){ 
                                        if(d.key === "apples"){ return "red" }
                                        else if (d.key === "oranges"){ return "orange" }
                                        else if (d.key === "pears"){ return "green" }
                                     })

将文本附加到字段

var text = groupRow.selectAll("text")
                            .data(function(d) {return d3.entries(d).filter(function(d) { return d.key !== "year"; })})
                            .enter()
                            .append("text")
                                   .attr("dx", function(d,i){ return (60 * i) + 20 })
                                   .attr("dy", 55)
                                   .attr("fill", "white")
                                   .text(function(d) {return d.value});

查看代码http://jsfiddle.net/jmeza/37PYJ/3/

例子不完整，我给你第一步……