D3中的过渡 - 重复气泡而不是过渡气泡

Question

我正在尝试创建类似于此示例的内容：Wealth and Health of Nations：

我的数据来自JSON文件，就像示例一样，但是当我添加转换时，我会得到重复的气泡。而不是气泡从点A转换到点B我得到2个气泡（一个用于点A，一个用于点B）。一般而言，转换不能区分相同气泡的2个数据点或2个单独的气泡。

看一下这个例子，我错过了插值和平分函数。我无法理解它们是如何工作的以及我究竟做错了什么。这是导致我的图表中出现问题的原因吗？

另外，有人能给我一个关于平分器和插值如何在d3中工作的例子吗？

代码：

 g = d3.select("#animation")
                .append("svg")
                .attr("width", width)
                .attr("height", height);

      x_extent = [0, 100];
      x_scale = d3.scale.linear().domain(x_extent).range([margin + 20, width - 30]);

      y_extent = [0, 60];
      y_scale = d3.scale.linear().domain(y_extent).range([height - margin, margin]);


      r_scale = d3.scale.linear().domain([0, d3.max(jsondata, function (d) { return d.MSVMMboe; })]).range([2, 30]);

      g.selectAll("circle").data(jsondata, function (d) { return d.EffectiveDate; }).enter().append("circle")
                      .attr("cx", function (d) { return x_scale(d.PercentageComplete * 100) })
                      .attr("cy", function (d) { return y_scale(d.GPoS * 100) })
                      .attr("r", function (d) { return r_scale(d.MSVMMboe) })
                      .attr("stroke", "blue")
                      .attr("stroke-width", 1)
                      .attr("opacity", 0.6)
                      .attr("fill", "red");


                      //add transition

                      g.selectAll("circle").data(jsondata, function (d) { return d.EffectiveDate; })
                      .transition()
                      .duration(1000);

Answer 1

你还没有告诉过渡你想要改变什么。例如，您需要添加一些属性更改。请查看d3网站上的示例和教程。