Question

I am using the GeoChart from Google (https://google-developers.appspot.com/chart/interactive/docs/gallery/geochart). I am trying to change some of the elements by using D3. I used their code as seen below:

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);

};

I am calling drawMarkersMap() from a different function and the timeout selects ONLY the rects of the svg. I then proceed selecting only the third rect which I want removed. The console log gives me this: [Array[0]], which is the selected rect as it should.
However nothing happens. I can remove all rect if I use: var svg1 = d3.select(“svg”).selectAll(“rect”).remove() but not the specific one.
Am I doing something wrong or Google GeoChart is not allowing this type of manipulation? Thank you.

Answer 1

According to the return value of selectAll() (that, as far as I understand from D3 documentation is an Array) the problem is that you use filter() to select the element you want to remove instead of navigating the array.

Also, you may find useful this blog article that explain how to use selectAll() and other D3 features to use the element selected.