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

我正在研究需要细垂直线的可视化。理想情况下，我想他们是1px宽。当我使用线性比例宽度（默认“range（）”）定位它们时，它们显示为具有不同的宽度，因为它们的计算位置并不总是像素的整数倍数。其中一些看起来正好是1px宽，但是（那些更亮）。笔画宽度= 1px的线的外观

然而，当我在线性标尺上使用rangeRound()时，尽管我明确指定了1px的笔画宽度，但所有行都具有相同的表观宽度，但它是2px。使用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×1080），边框看起来像它的1px的宽，但SVG线条看起来像他们2px的。

来源

2016-01-20 GuitarExtended

可能是由于你使用了尺寸的线条尺寸，如果你举了一个例子 – thatOneGuy

我会花时间，但这里有一些代码。 – GuitarExtended

只用了一个月：P我看看 – thatOneGuy

正如罗伯特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>

来源

2016-02-19 18:06:55 thatOneGuy

添加下面的风格属性为您的d3元素：

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

这使得线条更薄。

来源

2017-08-10 07:06:55

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

回答

相关问题