Menu
I'm working on a visualization that requires thin vertical lines. Ideally I'd like them to be 1px wide. When I position them using a linear scale width the default "range()", they appear as being of different widths, because their computed position is not always an integer number of pixels. Some of them appear to be exactly 1 px wide, though (those are brighter).
When I use rangeRound() on the linear scale however, all lines have the same apparent width, but it is 2px, even though I explicitly specify a 1px stroke-width. Rounding using Math.round() gives the same result. When I try with a stroke-width of 0.5, the lines are also 2px-wide, only dimmer.
Is it possible to draw "real" 1px-wide lines at all ?
EDIT : Here's some code :
<!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>
On my screen (1920 x 1080), the border looks like it's 1px wide, but the svg lines look like they're 2px.
787
As Robert Longson said in the comments, add crispEdges to the shape-rendering in the style like so :
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>Add the below style attribute to your d3 element:
.style('shape-rendering','crispEdges')
This makes the line thinner.
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
