D3.js - 将文本旋转到垂直

Question

D3.js - 将文本旋转到垂直

问题:

我是D3.js的新手,我创建了一个从数组中获取数据的条形图.我将文本放在条形图的顶部,文本比条形图本身宽.我想将它垂直旋转,以便文本穿过条形图的中间.

我知道.attr("transform", "rotate(180)")不会工作,因为它会将我的文字旋转到屏幕外.我在这里找到了Mike Bostock的答案,但它似乎对我不起作用,我不知道我做错了什么.他说我需要改变原点的旋转点,但我不能让它起作用.

任何帮助表示赞赏,您可以在下面找到以下代码:

var label = svg.selectAll("text")
              .data(data)
              .enter()
              .append("text")
              .text(function(d){
                return d;
              })
              .attr("x", function(d, i){
                xText = i*(w/data.length);
                return xText;
              })
              .attr("y", function(d){
                yText = h - yScale(d);
                return yText;
              })
              .attr("transform", "translate(" + xText + "," + yText + ") rotate(90)")
              .attr("fill", "black")
              .attr("font-family", "sans-serif")
              .attr("font-size", "11px");

Run Code Online (Sandbox Code Playgroud)

谢谢!

Answer 1

Mar*_*ark 6

您正在设置x和y属性并翻译文本.使用旋转,您只想使用translate:

.attr("transform", function(d,i){
  var xText = i * (w / data.length);
  var yText = h - yScale(d.v);
  return "translate(" + xText + "," + yText + ") rotate(90)";
})

Run Code Online (Sandbox Code Playgroud)

此外,我发现你的示例代码令人困惑,我假设你的数据是一个字符串数组,因为你这样做:

.text(function(d) {
  return d;
})

Run Code Online (Sandbox Code Playgroud)

但这会使yScale(d)NaN回归.

这是一个很好的例子:

<html>

<head>
  <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
</head>

<body>
  <script>
    var w = 300,
      h = 300,
      data = [{
          t: "Now",
          v: 50
        },{
          t: "is",
          v: 25
        },{
          t: "the",
          v: 10
        },{
          t: "winter",
          v: 30
        }];

    var svg = d3.select('body')
      .append('svg')
      .attr('width', w)
      .attr('height', h);

    var yScale = d3.scale.linear()
      .range([0, h])
      .domain([60, 0]);

    var label = svg.selectAll("text")
      .data(data)
      .enter()
      .append("text")
      .text(function(d) {
        return d.t;
      })
      .attr("transform", function(d,i){
        var xText = i * (w / data.length);
        var yText = h - yScale(d.v);
        return "translate(" + xText + "," + yText + ") rotate(90)";
      })
      .attr("fill", "black")
      .attr("font-family", "sans-serif")
      .attr("font-size", "11px");
  </script>
</body>

</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，3 月前
查看次数：	5646 次
最近记录：	10 年，3 月前