Javascript SVG+；Chrome：具有许多圆圈的奇怪渲染

我正在用d3在chrome上绘制数千个SVG圆形元素，并且遇到了奇怪的渲染问题。似乎在圆圈之间画出了路径。这些元素具有鼠标悬停事件，当鼠标悬停在这些元素上时，屏幕的一小部分会重新绘制并删除该区域的奇怪路径，但在鼠标悬停后，会返回到奇怪的行

预期的行为在Safari上有效，但在Firefox中根本没有绘制任何内容

我很难弄明白如何在Chrome上使用它。我之前通过删除圆圈CSS中的“CrispEdge”属性，使该行为的一个较小实例消失，但这不再有效。此外，我以前也能在Chrome中成功渲染这些点——不知道为什么现在开始这样

有没有人知道为什么会发生这种情况，我能做些什么让它在Chrome上运行？非常感谢您的任何意见

==============

Chrome版本：56.0.2924.87

Safari版本：10.0

用于绘制圆的JS代码：

  var xScale = d3.scaleLinear()
    .domain([0, xMax])
    .range([0, width - margin.right]); 

  var yScale = d3.scaleLinear()
    .domain([0, yMax])
    .range([height - margin.top, 0]);

  var x = function(d) { return xScale(d.x); }  
  var y = function(d) { return yScale(d.y); }

  svg.selectAll(".dot")
        .data(data)
        .enter().append("circle")
        .attr("class", "dot")
        .attr("cx", x) 
        .attr("cy", y)
        .style("fill", colors)
        .on("mouseover", function(d,i){
          tooltip.html(toolTipHTML(d))
           .style("left", (d3.event.pageX) + "px")
           .style("top", (d3.event.pageY - 28) + "px");
          return tooltip.style("visibility", "visible");
        })
        .on("mouseout", function(d){
          return tooltip.style("visibility", "hidden");
        });

CSS:

镀铬：

在狩猎中：

===========

编辑：

我曾在plunkr上重现过这个问题，但在刷新之后，它消失了。我试图添加更多数据以使其再次复制，但收到了来自plunkr的“400错误请求”响应。有时，当你放大圆圈时，会出现随机的“无关线”，但它们会随机消失。不管怎样，这是代码，如果它有帮助的话。我上面解释的原始问题仍然是一个问题，即使在多次刷新之后。非常感谢您对如何推进这项工作的任何想法

==============

编辑2/9：这可能是硬件问题。 我正在使用Macbook Air，2015年初；运行macOS Sierra 10.12。 正如我在评论中提到的，我录制了一段简短的视频，记录了当我放大Plunker演示时发生的奇怪行为，以防它比我单独用文字更好地描述问题：

---

对于任何关注此帖子的人，大约在2天前，其他人报告了Chrome上的一个bug（Mac上的Chrome）：

---

对于任何关注此帖子的人，大约在2天前，其他人报告了Chrome上的一个bug（Mac上的Chrome）：

---

提供一个JSFIDLE，这样我们就可以重现这个问题。你的圈子里没有r属性，这就是为什么Firefox什么也不画。当设置

cx

和

cy

时，比如

.attr（“cx”，x）

和

.attr（“cy”，y）

，什么是

x

和

y

？@Bethany尝试plnkr.co来设置演示。您可以包含比JSFIDLE大得多的文件。@Bethany哇，真了不起！你考虑过提交错误报告吗？对我来说，它适用于包含50k动态生成对象的以下版本：。提供一个JSFIDLE，以便我们可以重现问题。您的圆圈上没有r属性，这就是为什么Firefox不绘制任何内容。当设置

cx

和

cy

时，就像

.attr（“cx”，x）

和

attr（“cy”，y）

一样，什么是

x

和

y

。您可以包含比JSFIDLE大得多的文件。@Bethany哇，真了不起！你考虑过提交错误报告吗？对我来说，它与包含50k动态生成对象的以下版本一起工作：“…由其他人…”看起来有人就是Mike Bostock本人；-）“…被其他人…”看起来有人就是迈克·博斯托克本人；-）

circle { 
  fill: black;
  stroke: none;
  shape-rendering: auto;
}