javascript - Filtering Data with on click function -

i have 2 array objects hold d3.svg.symbol types circles, squares & triangles. array #1 has multiple symbols plot across canvas, whereas array #2 holds 3 symbols aligned together.

my goal able click on array #2 filter out of array #1 symbols dont want see. e.g. clicking circle in array #2 mean circles shown in array #1.

      var array1 = svg.selectall(a.array1)                    .data(json).enter().append("a")            array1.transition().duration(1000)              .attr("transform", function(d,i) {return "translate("+d.x+","+d.y+")" ;})             array1.append('path')                 .attr("d", d3.svg.symbol().type(function(d) {return shape [d.country];}).size(120))         var array2 = svg.selectall(g.array2)                      .data(filt)                      .enter().append("g")                      .attr("transform", function(d,i) {return "translate("+d.x+","+d.y+")" ;})            array2.append("path")           .attr("d", d3.svg.symbol().type(function(d){return d.shape;}).size(200))           .attr("transform", "translate(-10, -5)") 

so query how specify click onto array#2 specific types have three. therefore, clickable, have different outcome.

so far have tried try & select specific shapes in array#2

       array2.on("click", function(){    alert('success')  }) 

which alerts when click of them, when applied:

    array2.on("click", function(){ if (d3.svg.symbol().type('circle') === true) { return  alert('success') ;};  }) 

when click circle of array2 doesnt alert @ all.

it great if - thanks. http://jsfiddle.net/zc4z9/16/

the event listener gets current datum , index arguments, see the documentation. can access dom element through this. use follows.

.on("click", function(d) {    if(d.shape == "circle") { alert("success"); } });