Question

我已经找到了可能的解决方案，但对我没什么用。

问题是当我尝试相应地更新数据和饼图时，转换不起作用并且不止一次地打印主题中提到的错误。我是JS的新手，所以我正在寻求一些帮助。

代码：

<section>
    <h1>Widget Test</h1>
    This textbox is not in the widget:
    <br />
    <input type="text" data-bind="value: value" />
    <br /><br />
    <div data-bind="widget: { kind: 'testWidget', value: value }"></div>
</section>

初始数据集（gdp_values）;

    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);});

当数据更改为另一个类似数据时，它确实有效，但是当对数据进行如下更改时，转换不起作用并且会将相同的错误抛出40次。

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

有什么想法？

Answer 1

您必须反转您的选择顺序：输入选择应该在更新选择之前：

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);
    });

以下是演示：

＆＃13;

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);
    });



}

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="500" height="500"></svg>

＆＃13;

Answer 2

在对图表进行数据更新时出现此错误。我的解决方案是防止在加载数据时绘制图表。猜测arcTween代码不能很好地处理数据更改。

错误：<path>属性d：预期的弧标志（＆＃39; 0＆＃39;或＆＃39; 1＆＃39;）

2 个答案: