標簽在x軸上的旋轉變換

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"來定位軸文本。您應該使用平移來執行此操作，否則旋轉將使所有元素從左下角旋轉。

代碼應如下所示，平移和旋轉應在同一變換函數中進行：

.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"以將標簽完全居中於每個條形。