使用D3處理Google GeoChart SVG

我使用Google的GeoChart（https://google-developers.appspot.com/chart/interactive/docs/gallery/geochart）。我試圖通過使用D3來更改一些元素。我用他們的代碼如下所示：使用D3處理Google GeoChart SVG

google.load('visualization', '1', {'packages': ['geochart']}); 
//google.setOnLoadCallback(drawMarkersMap); 

function drawMarkersMap() { 
    var data = google.visualization.arrayToDataTable([ 
     ['Country', 'Popularity'], 
     ['Germany', 200], 
     ['United States', 300], 
     ['Brazil', 400], 
     ['Canada', 500], 
     ['France', 600], 
     ['RU', 700] 
    ]); 

    var options = { 
     displayMode: 'markers' 
    }; 

    var chart = new google.visualization.GeoChart(document.getElementById('chart_div')); 
    chart.draw(data, options); 

    window.setTimeout(function() {   
     var svg1 = d3.select("svg").selectAll("rect") 
      .filter(":nth-child(2)") 
      .remove(); 
     console.log(svg1); 
    }, 2000); 

};

我是從一個不同的函數調用drawMarkersMap（）和超時選擇SVG的僅rects。然後我繼續選擇我想要移除的第三個矩形。控制檯日誌給我這個：[數組[0]]，它是它應該選擇的矩形。但是沒有任何反應。我可以刪除所有rect，如果我使用：var svg1 = d3.select（「svg」）。selectAll（「rect」）。remove（）但不是特定的。我做錯了什麼或Google GeoChart不允許這種類型的操作？謝謝。

來源

2012-10-23 Antonios

根據selectAll（）的返回值（據我所知，D3文檔是一個數組），問題是您使用filter（）來選擇要移除的元素而不是導航數組。

另外，您可能會發現有用的this blog article，它解釋瞭如何使用selectAll（）和其他D3功能來使用所選元素。

來源

2013-01-23 09:41:26 Matteo

使用D3處理Google GeoChart SVG

回答

相關問題