d3.js - 使用 D3 操作 Google GeoChart SVG

Question

我正在使用 Google 的 GeoChart (https://google-developers.appspot.com/chart/interactive/docs/gallery/geochart)。我正在尝试使用 D3 更改一些元素。我使用了他们的代码，如下所示:

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的矩形。然后，我继续仅选择要删除的第三个矩形。控制台日志给了我这个:[Array[0]]，它应该是选定的矩形。 然而什么也没有发生。如果我使用: var svg1 = d3.select("svg").selectAll("rect").remove() ，我可以删除所有矩形，但不能删除特定的矩形。 我做错了什么或者 Google GeoChart 不允许这种类型的操作吗？谢谢。

Answer 1

根据 selectAll() 的返回值(据我从 D3 文档了解是一个数组)，问题在于您使用 filter() 来选择要删除的元素，而不是导航数组。

此外，您可能会发现有用的 this blog article解释如何使用 selectAll() 和其他 D3 功能来使用所选元素。