CODEWITHSUNDEEP
d3.jssvglinestroke
GuitarExtended
GuitarExtended

Reputation: 827

Appearance of lines with stroke-width = 1px

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.

Upvotes: 5

Views: 2729

Answers (2)

Gil Baggio
Gil Baggio

Reputation: 13963

Add the below style attribute to your d3 element:

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

This makes the line thinner.

Upvotes: 2

thatOneGuy
thatOneGuy

Reputation: 10612

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>

Upvotes: 5

Related Questions