D3.js：如何在數據已綁定時追加元素？

Question

我遇到D3 joins問題。我在泡泡圖上創建了一些圈子。當用戶點擊「顯示爲地圖」按鈕時，我想將圓形轉換爲地圖，然後爲每個地圖添加一個標籤。

當前點擊處理程序移動圓圈OK，然後給我一個JavaScript錯誤，而不是添加標籤：Uncaught TypeError: Object [object SVGCircleElement]... has no method 'append'。我知道這是因爲我的連接語法不正確，但我該如何解決它？

我可以找到添加新D3元素的所有示例，用於綁定新數據的情況 - 而不是當已有數據已綁定數據的情況下。

這是我創建的圈子代碼：

var circle = g.selectAll('.city') 
    .data(data).enter() 
    .append('circle') 
    .attr('class', 'city') 
    .attr('r', rfunc).attr("cy", 0) 
    .attr("cx", function(d, i) { 
     return rdist(d['dist']); 
    }).attr("transform", function(d, i) { 
     return "rotate(" + d.radial_pos + " 0 0)"; 
    }); 

這是我的點擊處理程序：

d3.select("#layout_geo").on("click", function() { 
    // Move the circles - this works OK. 
    var circles = d3.selectAll(".city") 
    .transition() 
    .duration(1300) 
    .attr('cx', function(d) { 
     return merc([d['lon'], d['lat']])[0] - 350; 
    }).attr('cy', function(d) { 
     return merc([d['lon'], d['lat']])[1] - 280; 
    }); 
    // How to add text to each circle? 
    circles.append('text') 
     .attr('class', 'background') 
     .text(function(d) { 
     console.log(d.name + ', ' + d.city); 
      return d.name + ', ' + d.city; 
     }) 
     .attr('cx', function() { 
     return ???; 
     }).attr('cy', function() { 
     return ???; 
     }); 
    }); 

Answer 1

這裏的問題是，circles是不正常的選擇，但一個transition。他們有一個方便的remove()函數來允許刪除項目，但不添加更多元素的append。

另一個問題是，附加元素<text>內部一個<circle>屬性不正確的SVG。在這種情況下，您需要將<text>和<circle>放入g元素like this內。在代碼中的相應變化將是：

d3.select("#layout_geo").on("click", function() { 
    // Assign the seleciton to circles 
    var circleG = d3.selectAll(".city"); 

    circleG.transition() 
     .duration(1300) 
     .attr('transform', 'translate(-100, -50)'); // Ignoring the rotation. 

    // And append text to the selection 
    circleG.append('text') 
     .attr('class', 'background') 
     .attr('dx', '1em') 
     .text(function(d) { 
      console.log(d.name + ', ' + d.city); 
      return d.name + ', ' + d.city; 
     }); 
    }); 

注意旋轉失去了<circle>元素同時改變transform屬性。它可以通過保存using two nested g elements with rotation on the outer one.