受 Mike Bostock's Wealth of Nations, 的启发,我试图说明随时间变化的感染率。我正在尝试按月份分组,并沿 x 轴(月份)转换()一个气泡。
我坚持按月分组...
根据下面 Lars 和 Christopher 的有用反馈,我对这篇文章进行了重要编辑。
这里有一个 jsFiddle 示例 - hhttp://jsfiddle.net/Nyquist212/JSsHL/1/
<div id="chart"></div>
<script type="text/javascript">
var json =
[
{
"Month":1,
"VisitCount":894,
"DiagnosisName":"ACUTE PHARYNGITIS"
},
{
"Month":1,
"VisitCount":807,
"DiagnosisName":"PNEUMONIA ORGANISM NOS"
},
{
"Month":2,
"VisitCount":566,
"DiagnosisName":"ACUTE PHARYNGITIS"
},
{
"Month":2,
"VisitCount":456,
"DiagnosisName":"PNEUMONIA ORGANISM NOS"
},
{
"Month":3,
"VisitCount":273,
"DiagnosisName":"ACUTE PHARYNGITIS"
},
{
"Month":3,
"VisitCount":189,
"DiagnosisName":"PNEUMONIA ORGANISM NOS"
}
]
var svgContainer = d3.select("#chart")
.append("svg")
.attr("height", 250)
.attr("width",750);
var bubbleGroup = svgContainer.append("g");
var bubble = bubbleGroup.selectAll("circle")
.data(json)
.enter()
.append("circle");
var bubbleAttributes = bubble
.style("stroke", "blue")
.style("fill", "white")
.attr("r", function(d){return (d.VisitCount/10);})
.attr("cy", 150)
.attr("cx", function(d){return (d.Month * 100);});
d3.select("Body").selectAll("p")
.data(json)
.enter()
.append("p")
.text(function(d){return d.Month + " " + d.DiagnosisName + " " + d.VisitCount;})
</script>
编辑:根据 Christopher Chiche 的更正更新
编辑:根据 Lars Kotthoff 的建议更新了部分工作示例
最佳答案
我会使用 d3.nest
的组合和一个过渡循环。最好用一个例子来说明:
svg.selectAll("circle")
.data(d3.nest()
.key(function(d) { return d.DiagnosisName; })
.entries(json))
.enter().append("circle")
.style("stroke", "blue")
.style("fill", "white")
.attr("cy", 150)
.attr("cx", 0)
.attr("r", 0)
.each(function(d) {
for(var i = 0; i < d.values.length; i++) {
d3.select(this).transition().delay(1000 * i).duration(1000)
.attr("r", function(d){return (d.values[i].VisitCount/10);})
.attr("cx", function(d){return (d.values[i].Month * 100);});
}
});
完整的 jsfiddle here .
关于javascript - D3.js 数据组和转换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20475382/