D3 过渡在 Chrome 中表现异常答案

【问题标题】：D3 transitions behave strangely in ChromeD3 过渡在 Chrome 中表现异常
【发布时间】：2014-02-01 00:16:14
【问题描述】：

我在 D3 中有一个简单的圆过渡，我有大约 23 个具有唯一名称的不同圆，它们从 A 点移动到 B 点。我在 .data() 中使用“圆名称”作为键。

在 Internet Explorer 中一切正常，但是当我在 Chrome 中尝试时，气泡无法正确映射。例如，当过渡运行时，气泡 1 变为气泡 3 的颜色和“r”。最终位置是正确的，气泡最终会出现在它们应该在的位置，但它们都在两点之间混合（填充和“r”）。

代码如下：

 g.selectAll("circle").data(effedate, function (d) { return d.BubbleName; }).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", "black")
      .attr("stroke-width", 1)
      .attr("opacity", 0.6)
      .attr("fill", function (d) {
          if (d.FairWay == "A") {
              return "steelblue";
          }
          else if (d.FairWay == "B") {
              return "yellow";
          }
          else if (d.FairWay == "C") {
              return "lightgreen";
          }
          else {
              return "lightblue";
          }
      });

      g.selectAll('circle')
             .data(effedate).exit().remove();

      //transition
      g.selectAll("circle").data(effedate2, function (d) { return d.BubbleName; }).transition().duration(3000)
      .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", "black")
      .attr("stroke-width", 1)
      .attr("opacity", 0.6)
      .attr("fill", function (d) {
          if (d.FairWay == "A") {
              return "steelblue";
          }
          else if (d.FairWay == "B") {
              return "yellow";
          }
          else if (d.FairWay == "C") {
              return "lightgreen";
          }
          else {
              return "lightblue";
          }
      });

有人在谷歌浏览器中遇到过过渡问题吗？

【问题讨论】：

标签： google-chrome d3.js transition

【解决方案1】：

听起来有点奇怪，Chrome 不太可能有问题。更可能的问题在于数据到元素的映射。不过，从这里看，您的代码看起来还是不错的。

但有一点是错误的：

g.selectAll('circle')
    .data(effedate).exit().remove();// <- WRONG: missing function (d) { return d.BubbleName; }

您需要提供返回d.BubbleName的键函数。

无法修复的 iF：您确定 d.BubbleName 产生了正确的值吗？您是在使用它的函数中console.log 吗？

另外，同一组 g 中是否还有其他 svg:circles 正在抛弃您的 selectAll。

【讨论】：