Filtering Data with on click function

I have two array objects that hold my d3.svg.symbol types which are circles, squares & triangles. Array #1 has multiple symbols which I plot across the canvas, whereas array #2 only holds three symbols aligned together.

My goal is to be able to click on array #2 to filter out all of the array #1 symbols that i dont want to see. e.g. Clicking a circle in array #2 would only mean circles are 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 my query is how do I specify the click onto array#2 specific types as I have three. Therefore, I would like all to be clickable, but have a different outcome.

So far I have tried this just to try & select specific shapes in array#2

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

which just alerts when I click any of them, however when this is applied:

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

When I click the circle of array2 it doesnt alert at all.

It would be great if I could get some help - thanks. http://jsfiddle.net/Zc4z9/16/

Answers


The event listener gets the current datum and index as arguments, see the documentation. You can also access the DOM element through this. You could use this like follows.

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

Need Your Help

Javascript Validation On Button Not Working

javascript php html forms

Hello I have got a newsletter form. Not too sure what's wrong with the validation but when a user clicks the subscribe button without entering any values into the fields it submits anyway and takes...

Cocoa WebView with private browsing - WebPreferences not been applied

objective-c osx cocoa webview webkit

I am trying to enable Private Browsing in a Cocoa WebView on a Mac App, however my WebPreferences are not been applied for some reason. Does anyone have any ideas? The WebView doesn't end up using

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.