Javascript D3将x轴标签放置在矩形内并旋转90度

我正在使用D3创建一个基本的条形图

对于我的x轴，我想将每个标签放置在它们各自的条上。文本也应旋转90度

要查看执行此操作的代码，请从第51行开始

---

标签会出现，并且会旋转90度，但是我无法将它们放置在各自矩形的上方。如何将每个x轴标签定位在其矩形的正上方？我觉得我的方法过于复杂。

您可以在同一个容器中创建

rect

和

text

元素，例如

var rContainer = svg
  .selectAll(".bar")
  .data(data)
  .enter()
  .append("g");

//append rectangles for the bar chart
rContainer
  .append("rect")
  .attr("class", "bar")
  .style("fill", function(d, i) { return color(i); })
  .attr("x", function(d) { return x(d.type); })
  .attr("y", 0)
  .attr("width", x.bandwidth())
  .attr("height", 0)
  .transition()
  .duration(500) //length of animation
  .delay(function(d, i) { return i * 100; }) //delay must be less than duration
  .attr("y", function(d) { return y(d.value); })
  .attr("height", function(d) { return height - y(d.value); });

//append a text element to it so I can rotate the text 270 degrees.
rContainer
  .append("text")
  .text(function(d) { return d.type; })
  .attr("width", x.bandwidth())
  .attr("font-size", "34px")
  .attr("fill", "white")
  .attr("text-anchor", "start")
  .attr("transform", function(d, i) {
    // http://stackoverflow.com/questions/11252753/rotate-x-axis-text-in-d3
    var yVal = y(d.value) - 6;
    var xVal = x(d.type) + x.bandwidth() / 1.6;
    return "translate(" + xVal + "," + yVal + ") rotate(270)";
  });

---

您可以检查这个

//从第40行开始

，现在这就更有意义了。我没有想过使用

x.bandwidth（）

来翻译每一段文本。非常感谢。我一定会在这件事上多讨论一点。：）

var rContainer = svg
  .selectAll(".bar")
  .data(data)
  .enter()
  .append("g");

//append rectangles for the bar chart
rContainer
  .append("rect")
  .attr("class", "bar")
  .style("fill", function(d, i) { return color(i); })
  .attr("x", function(d) { return x(d.type); })
  .attr("y", 0)
  .attr("width", x.bandwidth())
  .attr("height", 0)
  .transition()
  .duration(500) //length of animation
  .delay(function(d, i) { return i * 100; }) //delay must be less than duration
  .attr("y", function(d) { return y(d.value); })
  .attr("height", function(d) { return height - y(d.value); });

//append a text element to it so I can rotate the text 270 degrees.
rContainer
  .append("text")
  .text(function(d) { return d.type; })
  .attr("width", x.bandwidth())
  .attr("font-size", "34px")
  .attr("fill", "white")
  .attr("text-anchor", "start")
  .attr("transform", function(d, i) {
    // http://stackoverflow.com/questions/11252753/rotate-x-axis-text-in-d3
    var yVal = y(d.value) - 6;
    var xVal = x(d.type) + x.bandwidth() / 1.6;
    return "translate(" + xVal + "," + yVal + ") rotate(270)";
  });