我正在学习 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 中返回的内容为每年添加一列。你能给我一些关于如何实现这一目标的提示或指导吗?
迈克 这是制作图表的快速方法。
创建列并追加标题
// 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/
示例不完整,我给你第一步...