2

我正在使用 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 不允许这种类型的操作？谢谢你。

4

1 回答 1

2

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

此外，您可能会发现这篇解释如何使用 selectAll() 和其他 D3 功能来使用所选元素的博客文章很有用。

于 2013-01-23T09:41:26.127 回答