Removing data when clicking on canvas in d3
<p>I am working with a scatterplot in d3. Dots on the graph represent different papers. There are 3 different <b>types</b> each of these dots can have 1) In_library 2) cited_by 3) cites. These types are all set at various connections made to the database and are set to the data that has been retrieved and then this data is pushed onto <i>allData</i>. eg. On click of a paper of type <i>In_library</i>, 2 connections are made to the database, retrieving papers cited by the clicked paper and papers that cite the clicked paper. When this happens a refreshGraph function is called which clears all the current dots and redraws the dots using the updated data. </p>

<p>My question is, when I click anywhere on the canvas (anywhere but dots on the graph) I want the dots with the type <i>cites</i> and <i>cited by </i>to be removed. </p>

<p>What I imagine in my head that needs to happen is that a loop should go through the data that is used to draw the dots and when it comes across ones that have type <i> cites </i> or <i> cited by</i> it should remove them from the data. Then should call refreshGraph and the redrawn graph will not include the elements that I have removed. </p>

<p>Here is my attempt within the on click of the canvas:</p>

<pre><code>var svg = d3.select("body")
.append("svg")
.on("click", function() {

    for(i=0;i&lt;allData.length;i++){ 
        if (i.type == "cites"|| i.type == "cited by")
     {
        allData.splice(i, 1);
      }
    }
    refreshGraph();
    })
</code></pre>

<p>But this is clearly wrong as it doesnt appear to do anything at all. I would really appreciate any feedback as I am new to d3! Thanks in advance!</p>

<p><b> EDIT: </b></p>

<p>This issue was resolved by changing the loop to :</p>

<pre><code>for(var i = allData.length-1; i &gt;=0; i--){ 

        if (allData[i].type === "cites"|| allData[i].type === "cited by")
     {
        allData.splice(i, 1);
      } 

    }
</code></pre>