score:1

Accepted answer

It seems to me that this is an XY problem: you probably don't need any of that cumbersome each() code, you can do what you want using a key function in your data method.

However, since you didn't post your data or a (minimal) running version of your code, I'll address your specific question regarding the each() method.

My suggestion is first getting the id of this element...

var id = d3.select(this).attr("id");

... and filtering the data argument accordingly:

data.filter(function(d) {
    return d.id === id;
})[0]

Here is a very basic demo, where the size of the circles are changed according to their IDs:

var data = [{
  id: "foo",
  size: 20
}, {
  id: "bar",
  size: 40
}, {
  id: "baz",
  size: 10
}];

var svg = d3.select("svg");

updateChart(data);

function updateChart(data) {

  var sel = svg.selectAll(".agent")
    .each(function() {
      var id = d3.select(this).attr("id");
      d3.select(this).transition()
        .duration(1000)
        .attr("r", function() {
          return data.filter(function(d) {
            return d.id === id;
          })[0].size;
        })
    })
};
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg>
  <circle class="agent" id="foo" cx="50" cy="50" r="5" fill="teal"></circle>
  <circle class="agent" id="bar" cx="150" cy="50" r="5" fill="teal"></circle>
  <circle class="agent" id="baz" cx="250" cy="50" r="5" fill="teal"></circle>
</svg>


Related Query

More Query from same tag