Skip to content

tickSizeOuter(0) not yielding straight line #32

@curran

Description

@curran

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:

image

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:

image

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?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions