1

私はd3で作られた円をいくつか持っています。これらの円がクリックされたときにさらに円を追加し、既存の円を非表示にする必要があります (再度使用するため、削除しないでください)。

私が現在これを行っている方法は、リスナーを介して元の円のクリック イベントです。(これらは.selectAll('circle.nodes')

.on("click",function(d){
  //do stuff}).duration(1000);
   populateSubCircles);

サブサークルが中心の周りに表示されるようにします (計算を見て、正しいようです)。

  var populateSubCircles = function(){
    var subCircles = nodesG.selectAll("circles.subNodes").data(....

これにより、二次円が正しく追加され、cx と cy は正しいように見えます (中心円から離れすぎていません)。ただし、ページには表示されないようです (左上の 0,0 に表示されます)。なぜそれが起こっているのですか？どうすれば修正できますか？

ありがとう。

編集 - 1 枚か 2 枚の写真が役立つ場合があります。

検査要素の下に表示されるもの

ブラウザに表示されるもの

4

1 に答える 1

2

円に半径を設定していない可能性があります (円要素に明示的に設定する必要があり、塗りつぶし、ストロークなどのスタイル プロパティのみを設定できるため、CSS 経由では設定できません)。

ご覧のとおり、1 つの svg 円は半径 ( r) をに設定すると正常に表示され、もう 1 つ25はそうではなく、そのサイズは として正しく報告され0px x 0pxます。(ツールチップは位置ではなくサイズを報告します)。使用した SVG は次のとおりです。

<svg>
    <circle cx="100" cy="100" fill="#ffdf00" 
         stroke="#222222" stroke-width="2px" />
    <circle cx="50" cy="50" fill="#ffdf00" r="25" 
         stroke="#222222" stroke-width="2px" />
</svg>

この画像は 2 つの円のうちの 2 番目のものを示しています。Chrome Web ツールのインスペクターを使用すると、サイズが正しく報告されます。

52ピクセル×52ピクセル

再度、Chrome でインスペクターを使用して、半径が設定されていない最初の SVG 要素を強調表示しました。

0px×0px

サイズは として0px x 0px表示され、円は SVG ドキュメントの左上隅にあるかのように表示されます。

http://jsfiddle.net/wiredprarie/gNrZ3/

于 2013-04-07T15:16:08.207 に答える