0

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

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

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

x 轴标签问题说明

4

1 回答 1

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
});
于 2013-03-14T20:56:26.733 回答