简体   繁体   中英

D3: axis incorrectly rendering when setting ticks()

EDIT: rewrote the question to be more precise and relevant

I understand that the number of ticks should be dependent on the type of scale one uses and show the most intelligently spaced and formatted human-readable values as possible, given the input domain.

I am trying to track down the change that broke my original implementation. The major change is upgrading my d3 to v3.4.8, although I encounter the same problem when using jsfiddle.com's d3 v3.0.4 in my code.

I set it up the axis like this:

    var xScale = d3.scale.linear()
        .domain([0, 880])
        .range([0, 275]);  // the width in pixels of the axis

    var d3Axis = d3.svg.axis()
        .scale(xScale)
        .orient('bottom')
        .tickSize(5, 3, 0)  // major, minor, end
        .tickPadding(4)
        .ticks(5);

    // render
    var d3AxisNode = someParentNode
        .append('g')
        .call(d3Axis);

This is my pre-v3.4.8 axis with these settings:

它应该看起来如何

Here is what it looks like now:

现在看起来如何

This it how it looks when I don't set ticks at all (default = 10):

不设置刻度

There is probably something in my code out-with the pasted stuff here that is causing the problem, but there are no errors and all code completes fine. Since I don't load any other JS libraries and have even stripped everything down to just rendering a test axis with minimal scaffolding, I am interested if someone recognises this as a result of an obvious flaw when working with D3 axes, to help me hunt the root cause (I have been hunting too long already).

Has anyone else experienced this type of problem? Any thoughts are appreciated. Thanks!

It turns out that, like many things in life, "turning it off and on again" seems to have the trick this time around.

I shut down the server, cleaned the JS assets, cleared the browser cache, then ran the app afresh and lo, my axes worked again.

To anyone experiencing weird behaviour in a complex stack that doesn't seem logical and fails to turn up useful help when googled, it's probably best to just hit the switch twice.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM