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

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

你应该这样写：

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

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

如果您没有数据，则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 here。

D3.js数据组和转换

2 个答案: