D3的V3的主要和次要蜱?

时间:2013-10-08 08:25:44

标签: d3.js

我想绘制一个主要和次要刻度的轴,其样式不同。

这个例子http://bl.ocks.org/vjpgo/4689130大致完成了我想要的,但我不能让它与D3的V3一起工作。

.subDivide()是否已被弃用?我无法在当前文档中看到它:https://github.com/mbostock/d3/wiki/SVG-Axes

如果是这样,在D3的V3中绘制主要和次要刻度的最佳方法是什么?我应该绘制两个完全不同的轴吗?

1 个答案:

答案 0 :(得分:21)

最新版本没有提供任何可以像以前版本那样明确绘制次要刻度的内容,但是不需要绘制另一个轴来实现您想要的效果。您可以使用比例生成额外的刻度,然后使用熟悉的.data()模式为那些尚未存在线的线绘制线条。

xaxisg.selectAll("line").data(x.ticks(64), function(d) { return d; })
  .enter()
  .append("line")
  .attr("class", "minor")
  .attr("y1", 0)
  .attr("y2", -60)
  .attr("x1", x)
  .attr("x2", x);

xaxisg是之前绘制轴的容器。比例用于生成所需数量的刻度,匹配由数据本身完成。这意味着在使用.enter()选择时,不会为已存在的那些绘制额外的刻度。

完成jsfiddle here