tickSizeOuter(0) not yielding straight line

[Curran Kelleher]

The README states

An outer tick size of 0 suppresses the square ends of the domain path, instead producing a straight line.

However, practically this is not exactly true. When setting a stroke on the .domain path, one can observe that the endpoints are not quite right, as in this example:

In this case, after setting tickSizeOuter(0), I would expect that the domain path ending would end up as a square end.

The path for the X axis domain is M0.5,0V0.5H867.5V0. When changing it manually to M0.5,0V0.5H867.5, the resulting rendered path is a straight line:

The solution would be to exclude the V0 part of the path when tickSizeOuter === 0 somewhere around axis.js#L92. The following bit of implementation would need to change:

    path
        .attr("d", orient === left || orient == right
            ? "M" + k * tickSizeOuter + "," + range0 + "H0.5V" + range1 + "H" + k * tickSizeOuter
            : "M" + range0 + "," + k * tickSizeOuter + "V0.5H" + range1 + "V" + k * tickSizeOuter);

The change might look something like this:

    path
        .attr("d", orient === left || orient == right
            ? "M" + k * tickSizeOuter + "," + range0 + "H0.5V" + range1 + (tickSizeOuter ? "H" + k * tickSizeOuter : "")
            : "M" + range0 + "," + k * tickSizeOuter + "V0.5H" + range1 + (tickSizeOuter? "V" + k * tickSizeOuter : ""));

Is this change something that would be desirable?

[Jeremy FOUQUAT]

There is this issue on each axis ends.

For information : http://jsfiddle.net/7w2phbr6/87/

@curran : I thought to the same kind of fix (related to your previous pull request) 👍. Any new idea ?

axis.style('stroke-linecap', 'square');
// http://jsfiddle.net/7w2phbr6/91/
// Not perfect - Use CSS

axis.style('stroke-dasharray', '0 0.5 ' + range-size + ' 0.5')
// http://jsfiddle.net/7w2phbr6/108/
// Not perfect - Use CSS

No other idea :/

[Mike Bostock]

Fixed in 1.0.10.