stroke-width = 1px 的线条外观

Question

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

然而，当我在线性刻度上使用 rangeRound() 时，所有线条都具有相同的表观宽度，但它是 2px，即使我明确指定了 1px 笔划宽度。使用 Math.round() 舍入得到相同的结果。当我尝试将 stroke-width 设置为 0.5 时，线条也是 2px 宽，只是变暗了。

是否可以绘制 "real" 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) 上，边框看起来像 1px 宽，但 svg 线条看起来像 2px。

Answer 1

正如 Robert Longson 在评论中所说，将 crispEdges 添加到样式中的形状渲染中，如下所示：

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; 
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Answer 2

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

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

这会使线条变细。

stroke-width = 1px 的线条外观

Appearance of lines with stroke-width = 1px

svg

line

stroke

d3.js