Question

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

我知道如何创建和绑定文本元素，并计划在圆圈内进行标记，但是我很难理解我应该如何使用这个特定的数据结构。我没有选择请求更平的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/

示例不完整，我给你第一步......

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

1 个答案: