如何使刻度四舍五入到#的最接近的倍数？答案

【问题标题】：How to make the scale to round to the nearest multiple of #?如何使刻度四舍五入到#的最接近的倍数？
【发布时间】：2012-08-25 20:24:07
【问题描述】：

x.scale = d3.time.scale().domain(x.extent).range([0, dimensions.graph.width]);

此代码使用 x.extent ([Wed Aug 01 2012 00:00:00 GMT+0300 (EEST), Tue Aug 07 2012 00:00:00 GMT+0300 (EEST)]) 和图形宽度 (1000) 生成 x 值刻度。但是，我需要将此值四舍五入到最接近的 25 倍数 (Math.round(x/25)*25)。

通过这样做，我想获得现在定义为的精确宽度刻度：

x.axis = d3.svg.axis()
    .ticks(d3.time.days, 1)
    .tickSize(10, 5, 0)
    .scale(x.scale);

如何将x.scale 扩展为最接近的 25 倍数？

【问题讨论】：

标签： javascript axis d3.js rounding

【解决方案1】：

正确答案是interpolateRound，来自文档

返回两个数字 a 和 b 之间的插值器；插值器类似于interpolateNumber，除了它将结果值四舍五入到最接近的整数。

var xScale = d3.scaleLinear()
    .domain([0, 100])
    .range([0, width])
    .interpolate(d3.interpolateRound); // <-- round interpolation

【讨论】：

【解决方案2】：

您在寻找nice 函数吗？

x.scale = d3.time.scale().domain(x.extent)
            .range([0, dimensions.graph.width]).nice();

【讨论】：

正确链接：github.com/d3/d3-scale/blob/master/README.md#continuous_nice

【解决方案3】：

也许我误解了，但你不能在应用缩放函数后按照你的建议转换结果吗？即：

function roundScale(origVal) { return Math.round(x.scale(origVal)/25) * 25;}

然后使用该值设置属性：

.attr("x", function(d) { return roundScale(d.value); }

【讨论】：

这正是我想要的，但有一个小问题——我需要它来维护其d3.time.scale() 属性，否则d3.svg.axis 将与x.scale 不匹配。