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

Question

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

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

Answer 1

请尝试下面的代码。

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

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

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