Question

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

从1到20中选择并旋转它们！

我试过这种方式：

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

但似乎我选择整个X轴而不是每个文本分开。填充样式工作正常，但转换不正常，轴完全旋转。

Answer 1

您必须将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

Answer 2

这就是你想要的东西吗？

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

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

dc.js heatmap如何旋转文字？

2 个答案: