Question

我在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";
          }
      });

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

Answer 1

听起来有点奇怪且不太可能是Chrome出错了。更可能的问题是数据到元素的映射。不过，从这里开始，你的代码看起来很好。

但有一件事是错的：

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

您需要提供关键功能才能返回d.BubbleName。

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

此外，同一群组svg:circle中还有其他g可以放弃您的selectAll。

D3转换在Chrome中表现奇怪

1 个答案: