6

各jsonに対して円が作成され、xとyがランダムに表示されます

for(var d = 0; d<json.length; d++){
circlexloc[d] = ((Math.random()*2*r)-r);
circleyloc[d] = ((Math.random()*2*r)-r);
};

属性とアニメーションを設定しながら円変数を宣言する

var circle = svg.selectAll("circle").data(json)

circle.enter().append('circle')

アニメーション 

circle.transition()
  .duration(1000)
  .attr("fill", "blue")
  .attr('opacity',0.6)
  .attr('r', 5)

  .attr("cx", function(d, i) {return circlexloc[i] })
  .attr("cy", function(d, i) {return circleyloc[i] });

circle.exit().transition().duration(1000)
  .attr('opacity',0)
  .attr("r",0)
  .remove();

円に技術を付ける

 var text = svg.selectAll('text')
text.data(json)
.enter().append("svg:text")
.style("font-size", "10px")
.text(function(d) { return d.TechName; })
.transition().duration(1000) 
.attr('opacity', 1)       
.attr("x", function (d, i) { return (circlexloc[i]+6)})
.attr("y", function (d, i) { return (circleyloc[i]+4)});

});

現時点では、互いに重なり合う傾向があります。どうすればこれを防ぐことができますか? 提案と例をいただければ幸いです - ありがとう。

4

1 に答える 1

7

正確に何を求めているかに応じて、いくつかの異なるオプションがあります。

1 つの方法は、ノードに力を適用する強制指向レイアウトを使用して、定常状態に達した後にノードが重ならないようにすることです (定常状態に達するにつれてノードが重なる可能性があることに注意してください)。この例はhttp://bl.ocks.org/1377729で見ることができます。ノードの外観を完全にカスタマイズして、線を削除できることに注意してください。

http://jsfiddle.net/xwZjN/2/で強制ベースのレイアウトの例を作成しました。強制ベースのレイアウトでは、最初にノードを追加する必要があります。 

   force
       .nodes(nodes)
       .start();

そして、力の再計算ごとに位置を更新します。

   force.on("tick", function() {

     text.attr("x", function(d) { return d.x + 6; })
         .attr("y", function(d) { return d.y + 4; });           

     node.attr("cx", function(d) { return d.x; })
         .attr("cy", function(d) { return d.y; });
   });

もう 1 つのオプションは、 http://bl.locks.org/1628131packの例のようなレイアウトを使用することです。このレイアウトは、円を密に詰め込み、重ならないようにします。

于 2012-10-18T01:28:58.927 に答える