Question

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

然而，当我在线性刻度上使用rangeRound()时，所有线条都具有相同的表观宽度，但它是2px，即使我明确指定1px笔划宽度。使用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）上，边框看起来像1px宽，但svg线条看起来像是2px。

Answer 1

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

        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")

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

 svg {
        border : 1px solid black; 
    }

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

rails generate devise:views

Answer 2

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

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

这使得线条更薄。

笔画宽度= 1px的线条外观

2 个答案: