在點擊其他元素時添加SVG元素

我在d3中創建了一些圈子。點擊這些圈子時，我需要添加更多圈子，並使現有的圈子消失（不應再刪除它們，因爲我將再次使用它們）。在點擊其他元素時添加SVG元素

我現在這樣做的方式是通過一個監聽器來監聽原始圓圈上的單擊事件。（這些與.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的左上角），爲什麼會發生這種情況？我如何解決這個問題？

謝謝。

編輯- 一兩張圖片可能會有所幫助。

what I see under inspect element

what I see in the browser

來源

2013-04-07 praks5432

這可能是因爲你沒有半徑的圓設置（必須明確地圓元素上進行設置，並且無法通過CSS設置，因爲只有樣式屬性如填充，描邊等，可以設置）。

正如您所看到的，一個svg圈通常在設置半徑（r）爲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>

此圖像顯示兩個圓的第二個，在Chrome網絡工具使用檢查，它正確地報告尺寸：

52px x 52px

同樣，在Chrome中使用檢查強調了在沒有半徑設定第一SVG元素：

0px x 0px

它SH允許大小爲0px x 0px，並將該圓圈顯示爲在SVG文檔的左上角。

http://jsfiddle.net/wiredprairie/gNrZ3/

來源

2013-04-07 15:16:08 WiredPrairie

您應該報告的錯誤在任何UA你使用。不應該呈現沒有r屬性的圓圈，Firefox和Opera只顯示一個圓圈。 – 2013-04-07 15:22:29

@RobertLongson它實際上是兩個屏幕截圖，而不是一個錯誤。我現在給他們貼上標籤，希望他們更清楚。 – WiredPrairie 2013-04-07 15:50:56

@Progro - 好點。我的HTML帽子（邊框半徑:)）。我修正了答案，不建議半徑可以通過諸如'subNode'這樣的類來設置。 – WiredPrairie 2013-04-07 20:52:56

在點擊其他元素時添加SVG元素

回答

相關問題