D3转换在Chrome中行为奇怪

我在D3中有一个简单的圆转换，我有大约23个不同的圆圈，名称独特，他们从A点移动到B点。我使用“circle name”作为键。数据（）。D3转换在Chrome中行为奇怪

一切工作正常在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"; 
      } 
     });

有没有人遇到问题与谷歌浏览器的转变？

来源

2012-11-17 user1783490

听起来有点奇怪，Chrome不太可能出问题。更可能的问题是数据映射到元素。尽管如此，你的代码在这里看起来基本没问题

一件事是错的：

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

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

iF不能解决它：你确定d.BubbleName正在产生正确的值？它是否来自它所使用的功能之内的console.log？

此外，是否有其他svg:circle s在同一组g是抛出你的selectAll。

来源

2012-11-18 01:10:30 meetamit

D3转换在Chrome中行为奇怪

回答

相关问题