Я искал возможные решения, но у меня ничего не получалось.

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

Код:

    var pie = d3.pie();

    var pathArc = d3.arc()
        .innerRadius(200)
        .outerRadius(250);

    var color = d3.scaleOrdinal(d3.schemeCategory10);

    var t = d3.transition()
        .duration(500);

    var path = piesvg.selectAll("path")
        .data(pie(gdp_values));

    path.exit()
        .transition(t)
        .remove();

    path.transition(t)
        .attr("d",function (d) {
            return pathArc(d);
        })
        .attr("fill",function(d, i){return color(i);});

    path.enter()
        .append("path")
        .transition(t)
        .attr("d",pathArc)
        .attr("fill",function(d, i){return color(i);});

Начальный набор данных (gdp_values);

[407500000000, 417300000000, 439800000000, 680900000000, 980900000000, 1160000000000, 1727000000000, 2249000000000, 2389000000000, 3074000000000]

Он работает, когда данные изменяются на другие подобные данные, однако при изменении данных следующим образом переходы не работают и выдают одну и ту же ошибку 40 раз.

[7714000000, 123900000000, 846200000000]

Любые мысли?

3
Faruk 24 Апр 2017 в 01:22

2 ответа

Лучший ответ

Вы должны инвертировать порядок ваших выборов: выбор ввода должен предшествовать обновлению выбора:

path.enter()
    .append("path")
    .transition(t)
    .attr("d", pathArc)
    .attr("fill", function(d, i) {
        return color(i);
    });

path.transition(t)
    .attr("d", function(d) {
        return pathArc(d);
    })
    .attr("fill", function(d, i) {
        return color(i);
    });

Вот демо:

var piesvg = d3.select("svg").append("g").attr("transform", "translate(250,250)")

var gdp_values = [407500000000, 417300000000, 439800000000, 680900000000, 980900000000, 1160000000000, 1727000000000, 2249000000000, 2389000000000, 3074000000000];

var gdp_values2 = [7714000000, 123900000000, 846200000000];

var pie = d3.pie();

var pathArc = d3.arc()
  .innerRadius(200)
  .outerRadius(250);

var color = d3.scaleOrdinal(d3.schemeCategory10);

var t = d3.transition()
  .duration(500);

update(gdp_values)

setTimeout(function() {
  update(gdp_values2);
}, 1000)

function update(data) {

  var path = piesvg.selectAll("path")
    .data(pie(data));

  path.exit()
    .transition(t)
    .remove();

  path.enter()
    .append("path")
    .transition(t)
    .attr("d", pathArc)
    .attr("fill", function(d, i) {
      return color(i);
    });

  path.transition(t)
    .attr("d", function(d) {
      return pathArc(d);
    })
    .attr("fill", function(d, i) {
      return color(i);
    });



}
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="500" height="500"></svg>
1
Gerardo Furtado 24 Апр 2017 в 08:23

Я получил эту ошибку при обновлении данных на графике. Решение в моем случае состояло в том, чтобы предотвратить рисование графика во время загрузки данных. Предположение, что код arcTween не обрабатывает изменения данных изящно.

0
sarora 27 Июн 2019 в 14:30