V3的D3的主要和次要滴答？ [英] Major and minor ticks with V3 of D3?

问题描述

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

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

此示例 http：//bl.ocks。 org / vjpgo / 4689130 大致我想要的，但我不能得到它与D3的D3工作。

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-Axis

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.

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