score:0

I think the easiest way would be to give every component the same class. Then when you call chart.toggleState(1) you can do d3.selectAll('.component').each(function(d, i) { if (i == index) doWhatever; });

score:0

The data for a particular selection is in selection[0]. You can select the ith element and set an attribute thusly:

var i = 3
d3.select(mySelection[0][i]).attr("fill","#fff")

If you know the i, you could write toggleState thus:

function toggleState(i) {
    var toggle_me = d3.select(circles[0][i])
    var state = !(toggle_me.attr("fill") == "#fff")
    toggle_me.attr("fill", (state ? "#fff": "#000"))
}

If you didn't know the i, you could write toggleState thus:

function toggleState() {
    var toggle_me = d3.select(this)
    var i = circles[0].findIndex(function(d) {
        return d == toggle_me[0][0]
    })
    if (i !== -1) {
        var state = !(toggle_me.attr("fill") == "#fff")
        toggle_me.attr("fill", (state ? "#fff": "#000"))
      // Do additional functions with i here
      //var triange = d3.select(triangles[0][i])
      //...
    }
}

Working example: https://jsfiddle.net/fd7fyeoq/

For the same answer in a different context see: d3js : How to select nth element of a group?


Related Query

More Query from same tag