筆畫寬度= 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的線的外觀

回答

相關問題