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

【问题标题】：dc.js heatmap how to rotate text ?dc.js 热图如何旋转文本？
【发布时间】：2016-07-01 13:31:40
【问题描述】：

如何仅选择和旋转 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 轴，而不是单独选择每个文本。填充样式工作正常，但转换无法正常工作，并且斧头完全旋转。

【问题讨论】：

标签： css d3.js css-selectors dc.js

【解决方案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

【讨论】：

执行此操作的最佳位置是.on('pretransition', function(chart) { ... })，至少如果您使用的是 2.0 测试版。这在任何渲染或重绘后触发。（早期版本中的 Renderlet，但那是在转换之后，所以有一个跳转。）
谢谢你们俩！有用！我还有一个问题，如果在 X 轴上我有多个长度不同的字符串怎么办！如何让这些字符串从每个第一个字符开始绘制？如果我使用 .attr('dy', '+50') 结果不会很糟糕但不是理想的！因为每个 String 的长度不同 ... chart.selectAll("g.cols.axis text") .attr('dy', '+50') .attr("transform", function () { var coord = this.getBBox(); var x = coord.x + (coord.width / 2), y = coord.y + (coord.height / 2); return "rotate(90 " + x + " " + y + " )" }) .style("填充", "蓝色");
文本标签可以使用'text-anchor'属性对齐。 '开始''中间''结束'。看这里：developer.mozilla.org/en/docs/Web/SVG/Attribute/text-anchor

【解决方案2】：

您正在寻找类似的东西吗？

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

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

【讨论】：

哦，我明白你的意思了......嗯。
看来问题出在css选择器上 .selectAll("g.cols.axis > text")
我认为实际上是变换原点似乎卡在了整个轴的左边，即使你为每个元素都设置了它
看起来你需要单独分配每个元素的变换原点，以像素为单位，有趣的东西。应该能够使用循环来增加并根据字体大小和坐标进行调整。