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

Question

如果在X轴上我有多个不同长度的字符串怎么办？如何从每个第一个char开始绘制这些字符串？如果我使用
.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值必须是：

但我得到了这些价值观：

可以是那个设置＆＃34; text-anchor＆＃34;到＆＃34;未设置＆＃34;影响x的计算？

编辑：

为了解决这个问题，我得到了这个技巧。 保持.style("text-anchor", "middle")以便可以正确计算旋转的x和y，然后在最后将CSS更改为＆＃34; text-anchor：unset＆＃34;与.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");