Question

我在d3中创建了一个简单的条形图，并用'.ticks（3）'格式化y轴，表示我想看到3个刻度线。但是，根据数据，我有时会看到3个刻度线，有时会看到4个。此外，即使我得到3个刻度线，刻度位于轴标签的1/4处，然后是50％的另一个，然后是另一个在3/4。如何强制d3设置3个轴标签，一个在底部，一个在中间，一个在顶部？

Answer 1

您可以将一个刻度数组传递给一个轴，然后轴将在数组中的点处绘制刻度。

以下是一些示例代码。创建一个在0到100之间运行的轴。根据'ticks'数组，刻度标记绘制在0,50,60和100。

svg = d3.select("svg")

var myScale = d3.scale.linear()
        .domain([0,100])
        .range([0,400]);


var ticks = [0,50,60,100];

var myAxis = d3.svg.axis()
  .scale(myScale)
  .tickValues(ticks);

svg.append("g")
.attr("class", "axis")
.call(myAxis)
.attr("transform","translate(100,100)");

这是一个互动示例： http://tributary.io/inlet/5207532

如何在d3中指定轴刻度标记的数量？

1 个答案: