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

Question

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

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

看看这个例子，我错过了 interpolate 和 bisect 函数。我一直无法掌握它们是如何工作的，以及我到底做错了什么。这是导致我的图表出现问题的原因吗？

另外，谁能给我一个例子来说明平分线和插值如何在 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 网站以获取示例和教程。