0

I'm building an interactive timeline using D3. Around the SVG canvas I've placed black lines as visual borders. Now in Firefox and Edge the left borderline is invisible when I set its x1 and x2 values to 0, while in Chrome it shows up (see code snippet below). One solution would be to always set them to 1, but then in Chrome, other elements can be visible to the left of this border which is undesirable. How can I adapt my code to the client browser? This question asks how to detect Chrome but the answers seem rather hacky. Is there a way of using feature detection here? 

var svg = d3.select("body").append("svg");
var w = 500, h = 200;
var padding = 50;
svg.attr("width", w)
   .attr("height", h);
var leftPadding = 0;
var leftBorderLine = svg.append("line")
  .attr("x1", leftPadding)
  .attr("x2", leftPadding)
  .attr("y1", 0)
  .attr("y2", h)
  .attr("stroke", "black")
  .attr("stroke-width", 1)
  .attr("shape-rendering", "crispEdges")
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
Community
  • 1
  • 1
smcs
  • 1,281
  • 2
  • 15
  • 36
  • You tried SVG `viewBox="-12 -12 500 200"`? Negative values are allowed. – Alvin K. Apr 11 '16 at 01:33
  • I have now tried a viewbox with negative x value. This has the same implication as just setting the leftPadding to 1--other elements can still be visible left of the border (in my case, axis labels that move with the user's mouse when zoomed). So, what I really would need is to adapt my code to the client's browser. – smcs Apr 14 '16 at 02:53

1 Answers1

1

When you draw a line 1/2 of the stroke is drawn at one side and 1/2 at the other.

If you draw it from 0, 0 to 0, w for instance then 1/2 of the line is outside the viewable area since the line extends from -0.5 to 0.5 in the y direction.

Try drawing your lines 1/2 a stroke width in from the edge so that the complete line is visible.

Robert Longson
  • 102,136
  • 21
  • 218
  • 211
  • Interesting. In the minimal example included in the question, placing a horizontal line 0.5px from the SVGs left will work in Firefox, the line is visible, but not in my actual code. I fiddled with the values and it turns out I have to use 0.6 for the left padding and 0.4 for the right padding to make the border lines show up in both FF and Chrome but at the same time prevent any element "crossing" the border line. Thank you Robert! – smcs Apr 14 '16 at 04:19