Question

如何在圆圈中旋转文字？我的意思是，我想随机旋转（0-180deg），我有这样的功能：

jQuery.fn.rotate = function(degrees) {
        $(this).css({'-webkit-transform' : 'rotate('+ degrees +'deg)',
                     '-moz-transform' : 'rotate('+ degrees +'deg)',
                     '-ms-transform' : 'rotate('+ degrees +'deg)',
                     'transform' : 'rotate('+ degrees +'deg)'});
        return $(this);
        var r = getRandomInt(0, 180);
    };

   <!DOCTYPE html>
    <html>
      <head>
        <title></title>
        <script src="http://d3js.org/d3.v2.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

        <style type="text/css">

        #canvas {
            width: 300px;
            height: 300px;
            background-color: red;

        }

        </style>
      </head>
      <body>
        <div id="canvas" style="border:solid"></div>
        <script type="text/javascript">
     var w = 300,
      h = 300;

    var data = {
      name: "root",
      children: [{
          name: '1',
          size: 70
        },
        {
          name: '2',
          size: 70
        },
        {
          name: '3',
          size: 70
        },
        {
          name: '4',
          size: 70
        },
        {
          name: '5',
          size: 70
        },
        {
          name: '6',
          size: 70
        },
        {
          name: '7',
          size: 70
        },
      ]
    }

        jQuery.fn.rotate = function(degrees) {
        $(this).css({'-webkit-transform' : 'rotate('+ degrees +'deg)',
                     '-moz-transform' : 'rotate('+ degrees +'deg)',
                     '-ms-transform' : 'rotate('+ degrees +'deg)',
                     'transform' : 'rotate('+ degrees +'deg)'});
        return $(this);
        var r = getRandomInt(0, 180);
    };

    var canvas = d3.select("#canvas")
      .append("svg:svg")
      .attr('width', w)
      .attr('height', h);

    var nodes = d3.layout.pack()
      .value(function(d) {
        return d.size;
      })
      .size([w, h])
      .nodes(data);

    nodes.shift();

    canvas.selectAll('circles')
      .data(nodes)
      .enter().append('svg:circle')
      .attr('cx', function(d) {
        return d.x;
      })
      .attr('cy', function(d) {
        return d.y;
      })
      .attr('r', function(d) {
        return d.r;
      })
      .attr('fill', 'white')
      .attr('x', 0)
      .attr('y', 0)
      .attr('width', 6)
      .attr('height', 6);

    canvas.selectAll("text")
      .data(nodes)
      .enter()
      .append("text")
      .attr("x", function(d) {
        return d.x;
      })
      .attr("y", function(d) {
        return d.y;
      })
      .text(function(d) {
        return "Pomidorek";
      })
      .attr("text-anchor", "middle")
      .attr("font-family", "sans-serif")
      .attr("font-size", "18px")
      .attr("color", "black");



        </script>
      </body>
    </html>

我不知道怎么能这样做。我试图像这样添加旋转：

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

但没有结果，我想将随机旋转设置为文本，但我不知道如何才能得到它...

Answer 1

在文本元素上使用此功能，如下所示 -

    var angle = 90;

canvas.selectAll("text")
   .attr("transform", "translate(300,0) rotate("+angle+")");

检查这个小提琴，它会根据需要旋转文字 - https://jsfiddle.net/xagj6cyd/

检查此处的更新版本 - https://jsfiddle.net/4d28c81k/

在d3.js和jquery中旋转元素

1 个答案: