正确旋转和对齐 dc.js HeatMap 中的 X 轴文本

Question

如果在 X 轴上我有多个不同长度的字符串怎么办！如何让这些字符串从每个第一个字符开始绘制？如果我使用
.attr('dy', '+50')结果不会很差，但不是你想要的！因为每个字符串的长度不同...

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("fill", "blue");

这是一个工作示例：jsfiddle.net/5mt77e0o/2请注意名称和值是随机生成的！

Answer 1

请尝试下面的代码。

将 text-anchor:middle 设置为 text-anchor:unset 并增加 svg 高度。

 .attr("text-anchor", "middle");

http://jsfiddle.net/5mt77e0o/3/

Answer 2

似乎问题是当我给出 .style("text-anchor","unset"); 时，转换将无法正常工作并且特殊性 x :

 chart
 .selectAll("g.cols.axis text")
 .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("fill", "blue").style("text-anchor","unset");

正确的 x 值必须是：

但我得到的是这些值：

难道把"text-anchor"设置成"unset"会影响x的计算吗？

编辑：

为了解决这个问题，我使用了这个技巧。保留 .style("text-anchor", "middle") 以便可以正确计算旋转的 x 和 y，然后在最后将 CSS 更改为 "text-anchor : unset" .style("text-anchor", "unset");

 chart
   .selectAll("g.cols.axis text")
   .style("text-anchor", "middle")
    .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("fill", "blue").style("text-anchor", "unset");

正确旋转和对齐 dc.js HeatMap 中的 X 轴文本

Properly Rotate and Align X axis Text in dc.js HeatMap

javascript

css

heatmap

dc.js