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

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

到目前为止，我试过这个尝试＆amp;选择数组＃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"); }
});

使用单击功能过滤数据

1 个答案: