D3.js数据组和过渡

Question

受迈克·波斯托克 （ Mike Bostock）的《国富论》启发，我试图说明一段时间内的感染率。 我试图按月分组，然后沿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>

编辑：更新了克里斯托弗·奇切的更正

编辑：更新了部分工作示例，如Lars Kotthoff所建议

Answer 1

您的问题是dataset不包含任何数据。 它是对不返回任何内容的d3函数的调用。 但是，您具有此csv变量，并将其作为参数传递给drawChart函数。

因此，您应该这样写：

var circleGroup = svgContainer.append("g")
    .selectAll("circles")
    .data(csv)

每次在data（）调用中使用“数据集”时都相同。

如果没有数据，则d3不会绘制任何内容。 因此，在大多数情况下，查看出现此类问题时附加的数据很有帮助。

另外，出于相同的原因， interpolateData也无法正常工作，您可能应该将data作为参数传递。

Answer 2

我将为此使用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。