小编dcr*_*n22的帖子

放大时,D3轴标签会变得太细

我正在尝试创建一个轴功能,刻度/标签是动态的,这意味着它们会自动隐藏/显示.但最重要的是,我希望在一些缩放级别停止渲染更多的刻度/标签.这是一个例子:首先,轴显示年份,然后当您放大时,刻度变为月份,当您进一步放大时,它会显示天数(IE,12月28日).除了我想限制d3,这样当缩放时间超过几个月时,它不再渲染任何蜱,因为月份是我想要的最小单位.

我有几个例子,如果合并将是我想要的,但我无法弄清楚如何做到这一点.

另外:我添加了.tickFormat,因为我想显示每个tick都有一个缩写的月份格式.

示例1:http: //jsfiddle.net/GGYKL/

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

此示例显示了在放大时刻度/标签如何正确显示和消失,但是当您继续放大时,它会分割月份并开始重复月份刻度/标签,我不想限制用户放大.

示例2:http: //jsfiddle.net/4kz7t/

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

此示例解决了当您继续放大时的问题,就像我们在示例1中看到的那样,但是在缩放时它不会动态隐藏/显示刻度/标签.

javascript d3.js

8
推荐指数
1
解决办法
4166
查看次数

标签 统计

d3.js ×1

javascript ×1