Как обновить круговую диаграмму с помощью d3.js

Question

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

Я могу успешно создать круговые диаграммы из первого набора данных, используя этот код

var data = [[70, 30],[60, 40],[50, 50],[95, 5],[87, 13]]; 

progress.pie.vars.svg = d3.select(progress.pie.vars.pieEl).selectAll("svg") 
      .data(data) 
      .enter() 
      .append("svg") 
      .attr("width", 150) 
      .attr("height", 150) 
      .each(function(d) { this.currentAngles = d; }); // store the initial angles; 

progress.pie.vars.path = progress.pie.vars.svg.selectAll("path") 
      .data(function(d, i){ return pie(d) }) 
      .enter().append("path") 
      .attr("fill", function(d, i) { return color(i); }) 
      .attr("transform", "translate(" + 75 + ", " + 75 + ")") 
      .attr("d", arc); 

Примечание: Я использую жестко закодированные данные здесь, я могу повторить с помощью JSON, но я хотел бы упростить вещи просто так Я могу заставить переходы работать.

Это создает svg и отображает их на странице, но проблема возникает, когда я использую другой набор данных и пытаюсь обновить пути. Как это ...

var data = [[60, 40], [10, 10, 10, 70], [30, 70], [25, 25, 25, 25], [30, 35, 35]]; 

progress.pie.vars.svg = progress.pie.vars.svg.selectAll("svg") 
      .data(data); 

progress.pie.vars.path = progress.pie.vars.path 
      .data(function(d, i){ return pie(d) }) 
      .enter().append("path") 
      .transition() 
      .duration(5000); 

Я исследовал общий шаблон обновления d3, но я пока не совсем понимаю его.

Если у кого есть какие-либо предложения, как решить мою проблему или улучшить свой код, то его очень высокую оценку :)

Благодаря

Answer 1

Поскольку progress.pie.vars.svg содержит вновь добавляемые элементы, вам не нужно selectAll("svg"). Это будет выбор для любых элементов svg под вашими элементами svg. Вы должны иметь возможность просто позвонить data прямо на ваш выбор.

Для привязки данных progress.pie.vars.path, похоже, что вы только обрабатываете случай ввода для добавления новых путей (хотя вы не назначаете атрибут пути , как это было с оригинальными пирогами). Вы захотите добавить новые дуги для новых данных и обновить дуги для обновленных данных. Вы можете сделать это, сохраняя выбор обновлений отдельно от выбора входят:

progress.pie.vars.path = progress.pie.vars.path 
    .data(function(d, i){ return pie(d) }); 

progress.pie.vars.path.enter().append("path"); 

progress.pie.vars.path.attr("d", arc); 

Новые узлы добавлены к выбору входа неявно добавляется к выбору обновлений, так что последняя строка будет работать как на новых и existings. (Обратите внимание, что это не относится к выходу).

Вы должны проверить отличный учебник Майка Бостока Thinking With Joins.