D3 的 V3 的主要和次要滴答声?

问题描述

我想用不同样式的主要和次要刻度绘制一个轴.

I want to draw an axis with major and minor ticks styled differently.

这个例子http://bl.ocks.org/vjpgo/4689130大致做了什么我想要，但我无法让它与 D3 的 V3 一起使用.

This example http://bl.ocks.org/vjpgo/4689130 does roughly what I want, but I can't get it to work with V3 of D3.

.subDivide() 是一个不推荐使用的方法吗?我在当前文档中看不到它:https://github.com/mbostock/d3/wiki/SVG-轴

Is .subDivide() a deprecated method? I can't see it in the current documentation: https://github.com/mbostock/d3/wiki/SVG-Axes

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

If so, what is the best approach to drawing major and minor ticks in V3 of D3? Should I draw two completely different axes?

推荐答案

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

The latest version doesn't offer anything to draw minor ticks as explicitly as previous versions, but there's no need to draw another axis to achieve what you want. You can use the scale to generate additional ticks and then use the familiar .data() pattern to draw lines for those for which no lines exist already.

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() 选择时，不会为已经存在的刻度绘制额外的刻度.

xaxisg is the container into which the axis has been drawn before. The scale is used to generate the required number of ticks and matching is done by the data itself. This means that no additional ticks will be drawn for the ones that already exist when using the .enter() selection.

在这里完成jsfiddle.

Complete jsfiddle here.

这篇关于D3 的 V3 的主要和次要滴答声?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！