Javascript 作为长字符串输出的d3 x轴标签

我试图旋转我在d3中创建的d3堆叠直方图的x轴标签。所有标签要么显示为长字符串，要么相互重叠

这是我的标签代码：

var shortNames = ["label1", "label2", "label3", "label4"];

// Add a label per experiment.
var label = svg.selectAll("text")
.data(shortNames)
.enter().append("svg:text")
.attr("x", function(d) { return x(d)+x.rangeBand()/2; })
.attr("y", 6)
.attr("text-anchor", "middle")
.attr("dy", ".71em")
.text(function(d) {return d})
.attr("transform", function(d) {    // transform all the text elements
return "rotate(-65)"            // rotate them to give a nice slope
});

我使用了translate函数，所有标签仍然被视为一个长字符串。如何将翻译应用于每个标签

我可以在以后处理边距，但现在我想控制我的标签

---

我认为问题在于变换的顺序：当你旋转文本时，你也在旋转它的坐标系。因此，当您设置其x位置时–即使您设置的位置早于旋转变换–实际上是沿着旋转产生的65度轴移动它

如果我的观点正确，那么检查标签会发现它们仍然由多个文本元素组成（每个标签一个），而不是所有标签都有一个文本元素

通常，当您像对

rotate

那样引入

transform

属性时，您应该通过该属性进行所有转换。因此，您需要使用

translate

，而不是使用

“x”

属性。那么它看起来是这样的：

var label = svg.selectAll("text")
.data(shortNames)
.enter().append("svg:text")
// REOVE THIS: .attr("x", function(d) { return x(d)+x.rangeBand()/2; })
// AND THIS TOO: .attr("y", 6)
.attr("text-anchor", "middle")
.attr("dy", ".71em")
.text(function(d) {return d})
.attr("transform", function(d) {    // transform all the text elements
  return "translate(" + // First translate
    x(d)+x.rangeBand()/2 + ",6) " + // Translation params same as your existing x & y 
    "rotate(-65)"            // THEN rotate them to give a nice slope
});

您是否尝试过

.data（[shortNames]）

？