dc.js 热图如何旋转文本？

Question

如何 select 仅旋转 x 轴的文本！在这个例子中： http://dc-js.github.io/dc.js/examples/heat.html

所以 select 从 1 到 20 并旋转它们！

我这样试过：

 chart
 .selectAll("g.cols.axis > text")  
 .attr("text-anchor", "middle")
 .attr("transform", function () {
    return "rotate(-20)"
   })
 .style("fill", "blue");

但我似乎 select 正在 select 整个 X 轴而不是每个文本。填充样式工作正常，但转换不正常，斧头完全旋转。

Answer 1

您正在寻找这样的东西吗？

.cols.axis text{
  transform-origin: center;
  transform: rotateX(-20deg);
}

我不确定这是不是你想要旋转的轴，因为它只是将它们向上移动到图表上 - 但对于任何轴你都可以使用 rotateX/Y/Z!

Answer 2

您必须围绕其自身中心在 X 轴上旋转每个文本元素。为此，您必须指定旋转角度和旋转中心

rotate(angle centerX centerY)

考虑到这一点，您可以这样做：

  chart.selectAll('g.cols.axis > text')
            .attr('transform', function (d) {
                var coord = this.getBBox();
                var x = coord.x + (coord.width/2),
                    y = coord.y + (coord.height/2);
                return "rotate(-20 "+x+" "+y+")"
                });

记得在调用 chart.render(); 之后执行此操作，否则您的选择将为空

如果你想了解这是为什么，请看一看：https://sarasoueidan.com/blog/svg-transformations/

Here the working code

dc.js 热图如何旋转文本？

dc.js heatmap how to rotate text ?

css

css-selectors

d3.js

dc.js