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

我正在尝试创建类似于此示例的内容：：

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

看看这个例子，我缺少插值和对分函数。我无法理解它们是如何工作的，我到底做错了什么。这就是我的图表中出现问题的原因吗

还有，有人能给我举个例子，说明平分线和插值在d3中是如何工作的吗

代码：

---

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

听起来您在过渡期间添加了新元素，例如，您有.data….append….transition。。。。删除。附加。。。或者其他什么。如果不向我们展示实际的代码，就不可能准确地告诉我们出了什么问题。最初，我有以下代码：g.selectAllcircle.datajsondata，函数d{return d.EffectiveDate；}.transition.duration1000.attrcx，函数d{return x_scaled.PercentageComplete*100}.attrcy，函数d{返回y_scaled.GPoS*100}我想要bubble做的是转到下一个cx，cy点，但它无法识别下一个要转到的点。下一个点有相同的bubble名称和bubble id，并且有一个日期来区分它，例如：bubble a日期2010年1月10日；bubble B日期2010年12月31日。我用两个不同的数据集创建了一个简单的演示，在因为我已经设置了从dataset1中的一个点到datase2中的一个点的转换，但是自从我切换到json文件后，所有的点都在一个数据集中，这就是转换无法识别的地方现在d3中没有魔法-转换不能识别任何东西，你必须告诉它该做什么。你必须识别下一个点and相应地设置属性。我知道，这正是我遇到的问题，我不确定如何识别数据集中的下一个点并告诉D3使用该点。我尝试在.datadataset，key中使用不同的键，但没有做到。从您的描述来看，听起来您需要匹配名称或id，而不是有效日期。t基本模式是选择第一个日期的所有数据并绘制气泡。然后选择第二个日期的数据并再次进行相同的调用，除了代替。输入调用。转换。

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