使用单击功能过滤数据(Filtering Data with on click function)

使用单击功能过滤数据(Filtering Data with on click function)

我有两个数组对象，它们包含我的d3.svg.symbol类型，即圆形，正方形和三角形。 数组＃1有多个符号，我在画布上绘制，而数组＃2只有三个符号对齐在一起。

我的目标是能够点击数组＃2来过滤掉我不想看到的所有数组＃1符号。 例如，单击数组＃2中的圆圈仅表示圆圈显示在数组＃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)")

所以我的查询是如何指定点击阵列＃2特定类型，因为我有三个。 因此，我希望所有人都可以点击，但结果会有所不同。

到目前为止，我尝试过尝试选择阵列＃2中的特定形状

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

当我点击其中任何一个时，它会发出警报，但是当这个应用时：

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

当我点击array2的圆圈时，它根本不会发出警报。

如果我能得到一些帮助那就太棒了 - 谢谢。 http://jsfiddle.net/Zc4z9/16/

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/

最满意答案

事件侦听器将当前数据和索引作为参数获取，请参阅文档 。 您也可以通过this访问DOM元素。 你可以使用如下。

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

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"); } });