javascript - D3 axis labels become too fine grained when zoomed in - Stack Overflow

admin管理员组

文章数量:1344314

I'm trying to create an axis function that the ticks/labels are dynamic meaning they hide/show automatically. BUT on top of that, I want at some zoom level to stop rendering more ticks/labels. Here's an example: At first the axis shows the years, then when you zoom in the ticks bee Months, and when you zoom further in it shows the days (I.E., Dec 28). Except I want to restrict d3 such that when zooming further than the months, it doesn't render any more ticks because months are the smallest unit I want.

I have a couple examples that if bined would be exactly what I want, but I can't figure out how to do that.

Also: I added the .tickFormat because I want to display every tick to have an abbreviated month format.

Example 1: /

var xAxis = d3.svg.axis().scale(x)
    .tickFormat(d3.time.format('%b'))
    .orient("bottom");

This example shows how the ticks/labels appear and disappear correctly when zooming in, BUT when you continue zooming in, it splits the months and starts repeating the month ticks/labels, and I do not want to restrict the user from zooming in.

Example 2: /

var xAxis = d3.svg.axis().scale(x)
    .ticks(d3.time.months)
    .tickFormat(d3.time.format('%b'))
    .orient("bottom"),

This example fixes the problem when you continue zooming in like what we saw with Example 1, BUT it doesn't dynamically hide/show the ticks/labels when zooming.

I'm trying to create an axis function that the ticks/labels are dynamic meaning they hide/show automatically. BUT on top of that, I want at some zoom level to stop rendering more ticks/labels. Here's an example: At first the axis shows the years, then when you zoom in the ticks bee Months, and when you zoom further in it shows the days (I.E., Dec 28). Except I want to restrict d3 such that when zooming further than the months, it doesn't render any more ticks because months are the smallest unit I want.

I have a couple examples that if bined would be exactly what I want, but I can't figure out how to do that.

Also: I added the .tickFormat because I want to display every tick to have an abbreviated month format.

Example 1: http://jsfiddle/GGYKL/

var xAxis = d3.svg.axis().scale(x)
    .tickFormat(d3.time.format('%b'))
    .orient("bottom");

This example shows how the ticks/labels appear and disappear correctly when zooming in, BUT when you continue zooming in, it splits the months and starts repeating the month ticks/labels, and I do not want to restrict the user from zooming in.

Example 2: http://jsfiddle/4kz7t/

var xAxis = d3.svg.axis().scale(x)
    .ticks(d3.time.months)
    .tickFormat(d3.time.format('%b'))
    .orient("bottom"),

This example fixes the problem when you continue zooming in like what we saw with Example 1, BUT it doesn't dynamically hide/show the ticks/labels when zooming.

• javascript
• d3.js

Share Improve this question Follow edited Nov 18, 2013 at 23:06 d_coder asked Nov 15, 2013 at 21:25 d_coderd_coder 1,1911414 silver badges1919 bronze badges 5

• 3 D3 does that automatically, you shouldn't need to give a .tickFormat at all -- jsfiddle/GGYKL/1 – Lars Kotthoff Commented Nov 15, 2013 at 23:03
• You can simply define you own multi-scale time format -- see bl.ocks/mbostock/4149176 – Lars Kotthoff Commented Nov 18, 2013 at 22:49
• @Lars Kotthoff The reason I added the .tickFormat was because I want the abbreviated month tick format (Jan, Feb, Mar not 2013, January). Is there an option in d3 to stop adding more tick marks at a certain zoom degree? Say like after showing the month ticks, if you zoom further it DOESN'T split the range into days? I will use YOUR example: if you zoom in on "2004" you will soon see "April", "July", October", "2004", etc. BUT if you continue zooming, you see "November", "December", "2004", etc. Zoom even further and it splits into "Dec 28", Dec 29" which is what I'm trying to figure out. – d_coder Commented Nov 18, 2013 at 22:56
• 1 Multi-scale time format -- see my ment above. – Lars Kotthoff Commented Nov 18, 2013 at 23:05
• Note that this will only change the format though, not the number of ticks. There's no option for that. – Lars Kotthoff Commented Nov 18, 2013 at 23:12

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

The closest answer I've e across was the multi-scale time Format that @Lars Kotthoff suggested. I edited the custom time formatter to be:

http://jsfiddle/BdGv5/1/

var customTimeFormat = timeFormat([
    [d3.time.format("%Y"), function() { return true; }],
    [d3.time.format("%b"), function(d) { return d.getMonth(); }],
    [function(){return "";}, function(d) { return d.getDate() != 1; }]
]);

So the ticks themselves would still be generated when zooming in, but the labels would be empty string.

UPDATE:

I ended up creating my own function that I used in .ticks(). Ticks passes to your function the scale extent as t0 and t1. I divided the chart width by the label size (and padding) to find the maximum amount of labels without overlapping, and used underscore to remove every other tick if overlapping will occur.

http://jsfiddle/BdGv5/3/

function customTickFunction(t0, t1, dt)
    {

        var labelSize = 30; // largest label is 23 pixels ("May")
        var maxTotalLabels = Math.floor(width / labelSize);

        function step(date, offset)
        {
            date.setMonth(date.getMonth() + offset);
        }

        var time = d3.time.month.ceil(t0), times = [];

        while (time < t1) times.push(new Date(+time)), step(time, 1);

        if(times.length > maxTotalLabels)
            times = _.filter(times, function(d){
                return (d.getMonth() + 1) % 2;
            });

        return times;
    }

    var domain = xScale.domain();
    var xAxisMonthsFunction = d3.svg.axis().scale(xScale)
        .ticks(customTickFunction)
        .tickFormat(d3.time.format("%b"))
        .orient("bottom");

Update 2:

http://jsfiddle/BdGv5/5/

Made the ticks adjust further than just 1 level, now it has 4 levels (2,3,4,6).

function customTickFunction(t0, t1, dt)
{

    var labelSize = 30; // largest label is 23 pixels ("May")
    var maxTotalLabels = Math.floor(width / labelSize);

    function step(date, offset)
    {
        date.setMonth(date.getMonth() + offset);
    }

    var time = d3.time.month.ceil(t0), times = [], monthFactors = [2,3,4,6];

    while (time < t1) times.push(new Date(+time)), step(time, 1);

    var i;
    for(i=1 ; times.length > maxTotalLabels ; i++)
        times = _.filter(times, function(d){
            return (d.getMonth()) % monthFactors[i] == 0;
        });

    return times;
}

I had a similar issue while working on a d3 charting ponents layer and solved it with this method I call before axis rendering:

function preventTooSmallTimeIntervals(period) {
        var tickSeconds = (xScale.ticks()[1] - xScale.ticks()[0]) / 1000;
        var minSecondsPerInterval = period.seconds;
        if (tickSeconds < minSecondsPerInterval) {
            xAxis.ticks(period.d3TimeInterval.unit, period.d3TimeInterval.value);
        } else {
            xAxis.ticks(6);
        }
    }

In that example, period is an object, but you can provide hard-coded values for your situation instead of period.seconds (which is the duration of one interval) and period.d3TimeInterval fields.

    sc.model.period.day1 = periodFactory({
        display: '1 Day',
        seconds: 86400,
        d3TimeInterval: {unit: d3.time.day, value: 1},
        timeFormat: '%b-%d'});
    sc.model.period.hour1 = periodFactory({
        display: '1 Hour',
        seconds: 3600,
        d3TimeInterval: {unit: d3.time.hour, value: 1},
        timeFormat: '%b-%d %Hh'});
    sc.model.period.minute5 = periodFactory({
        display: '5 Minutes',
        seconds: 300,
        d3TimeInterval: {unit: d3.time.minute, value: 5},
        timeFormat: '%H:%M'});
    sc.model.period.minute1 = periodFactory({
        display: '1 Minute',
        seconds: 60,
        d3TimeInterval: {unit: d3.time.minute, value: 1},
        timeFormat: '%H:%M'});

The reason I am not using seconds every time in xAxis.ticks is that I had a huge performance drop when expressing a day minimum as xAxis.ticks(d3.time.seconds, 86400), so I stored the elements needed for d3 in a field.

The idea is to play with the 2 behaviours of axis.ticks, either an interval or a count. Below the threshold, we use a fixed interval, above we revert to d3 automated behaviour. Which solves the problem of zooming out after having zoomed in. Without the else part, you end up with a lot of ticks that stay at the interval you specified.

And in case you just want to copy/paste a simple example, here is an example for a minimum interval of 1 day:

    function preventTimeIntervalsSmallerThanADay() {
        var tickSeconds = (xScale.ticks()[1] - xScale.ticks()[0]) / 1000;
        var secondsPerDay = 86400;
        if (tickSeconds < secondsPerDay) {
            xAxis.ticks(d3.time.day, 1);
        } else {
            xAxis.ticks(6);
        }
    }

Remove .tickFormat as D3 automatically updates ticks dynamically. You can also limit the ticks.

Eg:

d3.svg.axis().scale(x)
.ticks(6) /*Number of Ticks you desire to display in x-axis scale*/
.orient("bottom")

本文标签： javascriptD3 axis labels become too fine grained when zoomed inStack Overflow