Gui*_*ded 4 svg line stroke d3.js
我正在处理需要细垂直线的可视化。理想情况下，我希望它们的宽度为 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。
正如罗伯特·朗森在评论中所说，在样式中将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/
svg.append("line").style('shape-rendering','crispEdges').attr("x1",W/2).attr("y1",0).attr("x2",W/2).attr("y2",H).attr("stroke","black")
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;
}