d3 x轴标签输出为长串

Question

我正在尝试为我在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
});

我玩过翻译功能，所有标签仍被视为一个长字符串。如何将翻译应用于每个单独的标签？

我可以稍后使用边距，但是现在我想控制我的标签。

Answer 1

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

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

通常，当您为transform添加rotate属性时，应该通过此属性进行所有转换。因此，您需要使用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
});