Question

我试图为我正在工作的热图绘制垂直标签。我正在使用http://bl.ocks.org/tjdecke/5558084中的示例。以下是我已更改的代码部分：

    var timeLabels = svg.selectAll(".timeLabel")
    .data(ife_nr)
    .enter().append("text")
    .text(function(d) {
      return d;
    })
    .attr("x", function(d, i) {
      return  (i * gridSize);
    })
    .attr("y", 0)
    //.style("text-anchor", "middle")
    //.attr("transform", "translate(" + gridSize / 2 + '-5' + ")")
    .attr("transform", "translate(" + gridSize/2 + '-8' + "), rotate(-90)")
    .attr("class", function(d, i) {
      return ((i >= 0) ? "timeLabel mono axis axis-worktime" : "timeLabel mono axis");
    });

但似乎标签似乎在第一个网格顶部彼此堆叠在一起。如何编辑此代码以正确显示标签？

Answer 1

两个问题：首先，translate应该用逗号分隔值：

"translate(" + gridSize/2 + ",-8), rotate(-90)")

假设-8是翻译的y值。如果您没有逗号，则括号内的值应仅为x转换（如果未提供y，则假定为零）。但即使实际上没有逗号而且所有gridSize/2 + '-8'只是x值仍然存在问题，因为number加string是string 。你必须澄清这一点。

除此之外，要在中心上旋转文本，您必须设置cx的{{1}}和cy。看看这个演示：

＆＃13;

rotate

＆＃13;

var svg = d3.select("body")
	.append("svg")
	.attr("width", 400)
	.attr("height", 100);

var texts = svg.selectAll(".texts")
	.data(["foo", "bar", "baz"])
	.enter()
	.append("text");
	
texts.attr("y", 50)
	.attr("x", function(d,i){ return 50 + 80*i})
	.text(function(d){ return d});
	
texts.attr("transform", function(d,i){
  return "rotate(-90 " + (50 + 80*i) + " 50)";
});

＆＃13;

如何在D3中将垂直文本绘制为标签

1 个答案: