Question

你好我有这个视觉：https://plnkr.co/edit/H6M1xoS9cZv5dKCTIyid?p=preview

我试图旋转x轴的标签，并尝试修改第299-317行中的代码无效 - 所以我觉得.attr("transform", "rotate(-65)" );等代码需要添加到以下内容？

// Add x labels to chart
var xLabels = svg
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + (margin.top + height) + ")");

xLabels.selectAll("text.xAxis")
  .data(BarData)
  .enter()
  .append("text")
  .text(function(d) {
    return d.dt;
  })
  .attr("text-anchor", "middle")
  // Set x position to the left edge of each bar plus half the bar width
  .attr("x", function(d, i) {
    return (i * (width / BarData.length)) + ((width / BarData.length - barPadding) / 2);
  })
  .attr("y", 15)
  .attr("class", "xAxis")

Answer 1

您的问题是您使用.attr("x"来定位轴文本。您应该使用translate来执行此操作，否则您的旋转将旋转左下角的所有元素。

代码看起来像这样，翻译和旋转应该在同一个转换函数中发生：

.attr("transform", function (d, i) {
    return "translate("
      + ((i * (width / BarData.length)) + ((width / BarData.length - barPadding) / 2))
      + ", 0) rotate(-65)";
})

以下是您的插件的工作版本：https://plnkr.co/edit/UqwtLqTn6iJ2XS012Vr4?p=preview

希望这有帮助。

Answer 2

通过链接帮助我最终使用了以下代码：

xLabels.selectAll("text.xAxis")
  .data(BarData)
  .enter()
  .append("text")
  .text(function(d) {
    return d.dt;
  })
  .attr({
    'text-anchor': "middle",
    transform: function(d, i) {
      var x = (i * (width / BarData.length)) + ((width / BarData.length - barPadding) / 2);
      var y = 20;
      return 'translate(' + x + ',' + y + ')rotate(-90)';
    },
    dy: "0.35em",
    'class': "xAxis"
  })

这里的工作示例：https://plnkr.co/edit/3d5UhM?p=preview

我还在属性dy: "0.35em"中添加了标签，使标签完全居中于每个栏。

x轴上标签的旋转变换

2 个答案: