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的rects。然后我继续选择我想删除的第三个矩形。控制台日志给我这个：[Array [0]]，这是应该选择的矩形。但没有任何反应。如果我使用的话，我可以删除所有rect：var svg1 = d3.select（“svg”）。selectAll（“rect”）。remove（）但不是特定的。我做错了什么或谷歌GeoChart不允许这种操作？谢谢。

Answer 1

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

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

使用D3操纵Google GeoChart SVG

1 个答案: