在D3的径向树布局中无法移除旋转

我有这个D3径向树图，我需要的是图像不旋转，而是直接一起出现相应的蓝色圆圈。 Here是Codepen工作的代码，我在这里把它复制：在D3的径向树布局中无法移除旋转

var radius = 960/2; 

var tree = d3.layout.tree() 
    .size([360, radius - 120]) 
    .separation(function (a, b) { return (a.parent == b.parent ? 1 : 2)/a.depth; }); 

var diagonal = d3.svg.diagonal.radial() 
    .projection(function (d) { return [d.y, d.x/180 * Math.PI]; }) 

var vis = d3.select('#graph').append('svg:svg') 
    .attr('width', radius * 2) 
    .attr('height', radius * 2 - 150) 
    .append('g') 
    .attr('transform', 'translate(' + radius + ',' + radius + ')'); 

d3.json('flare2.json', function (json) { 
    var nodes = tree.nodes(json); 
    var link = vis.selectAll('path.link') 
    .data(tree.links(nodes)) 
    .enter().append('path') 
    .attr('class', 'link') 
    .attr('d', diagonal); 
    var node = vis.selectAll('g.node') 
    .data(nodes) 
    .enter().append('g') 
    .attr('class', 'node') 
    .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; }); 
    node.append('circle') 
    .attr('r', 4.5); 
    node.append('image') 
    .attr('xlink:href', 'img/avatar.40.gif') 
    .attr('width', 40) 
    .attr('height', 40) 
    .attr('x', 10); 
    node.append('image') 
    .attr('xlink:href', 'img/avatar.41.gif') 
    .attr('width', 40) 
    .attr('height', 40) 
    .attr('x', 50); 
});

来源

2012-08-30 Alejandro Iglesias

你的节点旋转

.attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })

而您的影像添加到您的节点

node.append('image')

，所以你需要将图像旋转回去

.attr("transform", function(d) { return "rotate(" + (90 - d.x) + ")"; })

我不确定您要如何定位它们，但您需要在x和y之间翻译它们。

看到一个工作示例：http://codepen.io/anon/pen/qiCeG

来源

2012-08-31 02:27:05

是否有可能不旋转的节点，而不是反向旋转节点上的元素？当我尝试时，我的链接和节点变得疯狂。 – Andrioid

Android，我不清楚你想完成什么。你可以发表一个例子或更详细地描述吗？ –

试图完成相同的最终结果，而无需旋转节点本身。不是一个真正的功能问题，只是我的一个秘密。猜猜我可以尝试指定x/y值而不是使用旋转。但并不意味着劫持线程。 – Andrioid

在D3的径向树布局中无法移除旋转

回答

相关问题