Группы данных D3.js и переходы

Question

Вдохновленный Mike Bostock's Wealth of Nations, Я пытаюсь проиллюстрировать уровни инфицирования с течением времени. Я пытаюсь группировать по месяцам и переводить() пузырь вдоль оси x (месяц).

Я застрял на группировке по месяцам ...

Я редактировал этот пост значительно следующие полезные отзывы от Ларса и Кристофера ниже.

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> 

EDIT: обновление с исправлениями от Кристофера CHICHE

EDIT: обновление с частично рабочий пример, как предложил Ларс 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.

Answer 2

ваша проблема в том, что dataset не содержит никаких данных. Это вызов функции d3, которая ничего не возвращает. Однако у вас есть эта переменная csv, которую вы передаете в качестве аргумента функции drawChart.

Вы должны, таким образом, написать:

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

же за каждый раз, когда вы используете «набор данных» в данных (вызов).

Если у вас нет данных, то d3 ничего не рисует. Таким образом, глядя на данные, которые вы прикрепляете, когда у вас есть такая проблема, помогает большую часть времени.

Кроме того, interpolateData не будет работать по той же причине, вероятно, вы должны пройти data в качестве аргумента.