使用点击功能过滤数据

Question

我有两个数组对象来保存我的 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)")

所以我的查询是如何指定对 array#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/

Answer 1

事件监听器获取当前数据和索引作为参数，参见the documentation。您还可以通过this 访问DOM 元素。你可以像下面这样使用它。

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