Question

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

预期的行为适用于Safari，但在Firefox中根本没有绘制。

我很难弄清楚如何让它在Chrome上运行。我以前通过删除＆＃39; crispEdges＆＃39;以及更小的行为实例消失了。在圈子的CSS中属性，但这不再起作用了。此外，我之前已经能够在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：

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

在Chrome中：

在Safari中：

===========

编辑：Small demo on Plunker

我能够在plunkr上重现一次这个问题，但是在刷新之后，它就消失了。我试图添加更多数据以使其再次重现，但收到了一个错误的请求＆＃39;来自plunkr的回应。有时当你放大圆圈时，随机的“无关”线条会被放大。出现，但他们随机消失。无论如何，如果它有帮助，这里是代码。我上面解释的原始问题仍然是一个问题，即使多次刷新后也是如此。任何关于如何推进这一点的想法都非常感谢！

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

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

https://www.youtube.com/watch?v=saAm6Rim0zw&feature=youtu.be

Answer 1

对于关注此帖后的任何人，截至约2天前，其他人发现了Chromium上的错误（Mac上的Chrome）：

Chromium Bug Report

SVG + Chrome：多圈的奇怪渲染

1 个答案: