旋转d3.js和jquery中的元素

如何在圆中旋转文本？我的意思是，我想随机旋转（0-180deg），我有功能类似这样：旋转d3.js和jquery中的元素

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)"; 
})

但是没有结果，我想设置任意旋转的文字，但我不知道我怎样才能得到这个..

来源

2017-03-02 KaradaJii

-1

使用该上的文字像下面的元素 -

var angle = 90; 

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

检查这个小提琴，它旋转文本，因为你需要 - https://jsfiddle.net/xagj6cyd/

检查更新的版本在这里 - https://jsfiddle.net/4d28c81k/

来源

2017-03-02 15:39:12 sparta93

hm我该如何旋转而不需要翻译？ – KaradaJii

@KaradaJii尝试没有翻译，它应该工作。检查我的编辑 – sparta93

http://pastebin.com/k3qy4Aea整个代码，不起作用 – KaradaJii

旋转d3.js和jquery中的元素

回答

相关问题