1

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

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

4

1 回答 1

0

听起来有点奇怪，Chrome 不太可能有错。更可能的问题在于数据到元素的映射。尽管如此，您的代码从这里看起来大部分都很好。

但有一件事是错误的：

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

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

无法解决问题的 iF：您确定d.BubbleName产生了正确的值吗？您console.log是从使用它的功能中获得的吗？

svg:circle此外，同一组中是否还有其他sg正在抛弃您的 selectAll。

于 2012-11-18T01:10:30.423 回答