javascript - 奇怪的网格线行为

标签 javascript d3.js

仪表板 1:https://bl.ocks.org/diggetybo/073f2f9b4b9a0c88211c9c643e47e9a9

仪表板 2:https://bl.ocks.org/diggetybo/c16c1168705ea18b7d8711c15e90f8ec

如果有人能解释为什么右下图第二个链接中的网格线比第一个链接中的网格线具有更高的刻度间隔(或任何你想调用它的名称),我会很高兴。 d3 模板是我几周前制作的模板,我正在复制和粘贴它以用于不同的数据集。然而,尽管花了好几个小时仔细检查所有内容,我仍然不确定为什么要这样做。

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

请告诉我您是如何做到的,您是强行设置网格线的样式,还是您找到了问题的根源。也就是说,为什么它选择在那个图上添加这么多网格线,而其他的一个都不添加。

谢谢

最佳答案

要调节 ticks 的数量,请使用 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));

dashboard2 比 dashboard1 中的刻度数多的原因是因为数据集不同(其中没有 css 技巧)。可能有些专家可以阐明为什么会有更多滴答声

Here是一个工作 plunk,我在其中调节了滴答声的数量

如果您知道刻度值是什么,那么使用 tickValues 读取 here

关于javascript - 奇怪的网格线行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38278976/

相关文章:

javascript - 8k+ 项目的 dc.js lineChart 性能问题

javascript - enzyme 、react-dom/test-tools 或 jsdom 中是否存在影响 clientHeight 的已知缺陷?

javascript - Google +1 按钮未打开 "share this"气泡

javascript - D3.js - 多环圆环图

javascript - D3 - 将事件添加到酒吧

d3.js - 反转 d3.zoom 比例和翻译的顺序

javascript - 将 Javascript 表发送到 PHP

javascript - crockford 说 undefined 不能是属性值是什么意思?

javascript - Chrome 扩展存储大量数据

javascript - 在 Google map API 的 SVG 图标内添加文本