1

このD3放射状ツリーグラフがあり、必要なのは回転しない画像ですが、対応する青い円でまっすぐに表示されます。これがCodepenで動作するコードで、ここにコピーします。

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

1 に答える 1

2

ノードが回転します

.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-31T02:27:05.653 に答える