Accepted answer

Your code here:

var circle = svg.selectAll("circle")

Will append one circle for each item in the array data.features (assuming no circles are already present). As there are four items in the array, you'll have four circles. If you just want to append one circle, change the input data array to an array of one feature:


Then, you can update that data, after the initial append, when you want to transition to a new feature:

  .attr("attr to be updated",...)

The example below applies this method in a non-geographic setting: 1. append a feature, 2. update the feature with properties from the next item in an array, 3. repeat:

var svg ="body")
var data = [{x:100,y:100,r:10},{x:200,y:100,r:30},{x:200,y:200,r:10},{y:200,x:100,r:25}];

var circle = svg.selectAll("circle")
  .attr("cx",function(d) { return d.x; })
  .attr("cy",function(d) { return d.y; })
  .attr("r",function(d) { return d.r; });
var i = 0;

function transition() {[data[++i%4]])  // get the next item in the data array, assign that datum to the feature
    .attr("cx",function(d) { return d.x; }) // update the properties of the feature
    .attr("cy",function(d) { return d.y; })
    .attr("r", function(d) { return d.r; })
    .each("end",transition)  // loop
<script src=""></script>

Here is your map with that method (with minimal code changes - though regretfully I changed the json file name)


If you do console.log(data.features.length), you'll have the result 4. That means that data.features has 4 arrays and, of course, your enter selection will have 4 circles.

As those arrays seem to have the same geographic position (all of them point to the Town Hall and have the same coordinates, which is "151.2062183,-33.8732664"), use just one of them. For instance, the first array:

var circle = svg.append("circle")

That will append just one circle, for the first element.

Here is your updated bl.ocks:

Related Query