小编mar*_*fen的帖子

我正在尝试使用 d3 构建仪表板，并将布局构建为响应式网格。我正在使用 d3 为网格中的每个项目添加一个 svg 元素，当我添加 svg 元素时，我还添加了一个相对于每个网格项目的大小进行定位和缩放的矩形。rect 的笔触 (stroke-width=1) 总是被画得很模糊，唯一让它清晰的方法是在 rect 的 x 和 y 位置加上 0.5。

模糊：

清脆（矩形偏移 0.5）：

我了解抗锯齿是什么以及这从根本上是什么导致了模糊的线条。我试图了解如何/在哪里/为什么将 rects 放置 0.5 off，或者默认情况下它们是否放置在像素之间。

我使用 .clientHeight/.clientWidth 来设置 svg 元素的视图框，并设置矩形的大小。这两个变量都返回整数。我使用“fr”单位来定义网格，我尝试切换到绝对像素值，但没有帮助。

非常感谢，这里有一个片段和一个 codepen 项目：

  let rect = svg.selectAll('rect').data([null]);
  rect.enter().append('rect')
    .merge(rect)
      .attr('x', 10) // if I make these values '10.5'
      .attr('y', 10) // then everything looks crisp...
      .attr('width', props.width - 20)
      .attr('height', props.height - 20)
      .style('fill', 'none')
      .style('stroke', '#FFFFFF')
      .style('stroke-width', '1')

https://codepen.io/markersniffen/project/editor/AKmYea