javascript - 使用 d3.js 的 x.ticks() 中的文本不正确

Question

在我正在处理的一个条形图中，我创建了 x 轴的平行刻度，以便为查看器提供参考。问题出在我添加的文本中。文本的顺序应该是相反的，我不知道如何保持正确的顺序。

我明白问题出在这里：

  chart.selectAll("line")
        .data(y.ticks(4))
    .enter().append("line")
        .attr("x1", 60)
        .attr("x2", (barWidth + 50) * data.length)
        .attr("y1", y)
        .attr("y2", y)
        .style("stroke", "#ccc");

    chart.selectAll(".rule")
        .data(y.ticks(4))
    .enter().append("text")
        .attr("class", "rule")
        .attr("x", 30)
        .attr("y", y)
        .attr("text-anchor", "middle")
        .text(String);

但我不知道如何解决它。

这是 jsFiddle 中的代码。提前致谢。

Answer 1

问题是y坐标是从顶部而不是底部计算的，因此您需要反转所有值。更新的 jsfiddle 在这里；相关变化如下。

var y = d3.scale.linear()
      .domain([0, d3.max(data, function(datum) { return datum.value; })])
      .rangeRound([height-20, 0]);

反转值rangeRound，使最小值映射到顶部。

chart.selectAll("rect")
  .data(data)
  .enter()
  .append("svg:rect")
  .attr("x", function(datum, index) { return x(index); })
  .attr("y", function(datum) { return y(datum.value); })
  .attr("height", function(datum) { return height - y(datum.value); })
      ...

更改了计算方式y和height相应的计算方式。