D3.js堆叠色块间出现灰色细边问题求助

嘿，我之前做D3堆叠可视化的时候也踩过这个坑！那些莫名其妙的灰色细边真的很烦人，大概率是下面几个原因之一，给你逐个排查：

• 浮点坐标触发的抗锯齿
  D3计算堆叠位置时，很容易算出非整数的x/y/宽高值。SVG渲染半像素位置的元素时，会自动开启抗锯齿，把边缘模糊成灰色。解决办法就是把所有坐标和尺寸用Math.round()转成整数：

  // 给矩形的关键属性加取整处理
  .attr("x", d => Math.round(d.x0))
  .attr("width", d => Math.round(d.x1 - d.x0))
  .attr("y", d => Math.round(d.y0))
  .attr("height", d => Math.round(d.y1 - d.y0))
  

• 意外的描边样式
  有时候全局CSS或者继承的样式会偷偷给矩形加上描边，哪怕你没在代码里写stroke。比如页面里有rect { stroke: #eee; }这种全局样式，就会出现细边。直接显式把描边设为无就能解决：

  .style("stroke", "none")
  

• 堆叠数据的精度误差
  如果你的堆叠数值是通过复杂计算得到的，浮点数精度问题可能导致两个色块之间出现极小的间隙，渲染后就变成灰色边。可以在生成堆叠数据的时候就对数值做取整处理：

  const stackedData = d3.stack()
    .keys(yourValueKeys)
    (rawData).map(layer => 
      layer.map(segment => ({
        ...segment,
        y0: Math.round(segment.y0),
        y1: Math.round(segment.y1)
      }))
    );
  

另外可以用浏览器开发者工具选中色块元素，看看它的实际坐标是不是整数，有没有被设置了描边属性，这样能快速定位问题~

内容的提问来源于stack exchange，提问作者Isa