stroke-width = 1px 的线条外观答案

【问题标题】：Appearance of lines with stroke-width = 1pxstroke-width = 1px 的线条外观
【发布时间】：2016-04-26 12:46:22
【问题描述】：

我正在处理需要细垂直线的可视化。理想情况下，我希望它们的宽度为 1px。当我使用线性比例宽度（默认“range()”）定位它们时，它们看起来具有不同的宽度，因为它们的计算位置并不总是整数个像素。不过，其中一些看起来正好是 1 px 宽（那些更亮）。

但是，当我在线性刻度上使用rangeRound() 时，所有线条的表观宽度都相同，但它是 2 像素，即使我明确指定了 1 像素的笔画宽度。使用Math.round() 进行舍入会得到相同的结果。当我尝试使用 0.5 的笔画宽度时，线条也是 2px 宽，只是更暗。

是否可以绘制“真实的”1px 宽的线条？

编辑：这是一些代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style>

    svg {
        border : 1px solid grey;
    }
</style>
</head>
<body>
    <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script>

        var W = 1000, H = 400;

        var svg = d3.select("body").append("svg").attr("width",W).attr("height",H);

        svg.append("line").attr("x1",W/2).attr("y1",0).attr("x2",W/2).attr("y2",H).attr("stroke","black");
        svg.append("line").attr("x1",0).attr("y1",H/2).attr("x2",W).attr("y2",H/2).attr("stroke","black");

    </script>
</body>
</html>

在我的屏幕 (1920 x 1080) 上，边框看起来像 1 像素宽，但 svg 线条看起来像 2 像素。

【问题讨论】：

可能是因为您使用了线条尺寸的比例，如果您举个例子会很有帮助
我花时间，但这里有一些代码。
只用了一个月：请看一下
尝试 shape-rendering="crispEdges"
这确实有效。谢谢。

标签： d3.js svg line stroke

【解决方案1】：

正如 Robert Longson 在 cmets 中所说，在形状渲染中添加清晰的边缘，如下所示：

svg.append("line").style('shape-rendering','crispEdges').attr("x1",W/2).attr("y1",0).attr("x2",W/2).attr("y2",H).attr("stroke","black")

http://jsfiddle.net/reko91/fAaRx/207/

        var W = 1000, H = 400;

        var svg = d3.select("body").append("svg").attr("width",W).attr("height",H);

        svg.append("line").style('shape-rendering','crispEdges').attr("x1",W/2).attr("y1",0).attr("x2",W/2).attr("y2",H).attr("stroke","black")
        svg.append("line").style('shape-rendering','crispEdges').attr("x1",0).attr("y1",H/2).attr("x2",W).attr("y2",H/2).attr("stroke","black")

 svg {
        border : 1px solid black; 
    }

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案2】：

将以下样式属性添加到您的 d3 元素：

.style('shape-rendering','crispEdges')

这会使线条变细。

【讨论】：