javascript - D3.js 数据组和转换

Question

受 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 的建议更新了部分工作示例

Answer 1

我会使用 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 .