奇怪的网格线行为

时间:2016-07-09 06:15:19

标签: javascript d3.js

信息中心1:https://bl.ocks.org/diggetybo/073f2f9b4b9a0c88211c9c643e47e9a9

信息中心2:https://bl.ocks.org/diggetybo/c16c1168705ea18b7d8711c15e90f8ec

如果有人能够解释为什么右下方图表中第二个链接中的网格线比第一个链接中的网格线具有更高的刻度间隔(或者您想要的任何内容),我很乐意。 d3模板是我几周前制作的模板,它只是我复制和粘贴以用于不同数据集的东西。然而,尽管对所有内容进行了几个小时的检查,但我仍然不确定为什么会这样做。

唯一不同的是数据,但它们的数据类型非常相似,域应该相似。例如,右下图是两个仪表板的正数。也许它因为某些奇怪的原因被解析得不同?

让我知道你是怎么做到的,无论你是粗暴强迫网格线的样式,还是你找到了问题的触发器。也就是说,为什么它选择在该图上添加更多网格线而不是其他网格线。

谢谢

1 个答案:

答案 0 :(得分:1)

规范ticks使用滴答数(4)

阅读here这将在x轴上生成4个刻度。

var xGridlineNodes = svg.append('g')
        .attr('transform', 'translate(' + margins.left + ',' + (totalHeight - margins.bottom + axisPadding) + ')')
        .call(xGridlinesAxis.tickSize(-graphHeight - axisPadding, 0, 0).tickFormat("").ticks(4));

仪表板2中的滴答比仪表板1中的滴答更多的原因是因为数据集不同(没有css技巧)。可能是某些专家可以对为什么更多滴答提供一些启示。

Here是一个工作插件,我已经调整了滴答数

如果您知道滴答值将是什么,那么请使用tickValues读取here