在D3路径上的Jquery点击事件

Question

我第一次使用D3来展示所有美国国会选区的地图。我也想和D3一起使用jquery。我无法在jquery中捕获每个区域的路径中的click事件。每个路径都有一个分配给它的“区域”类。但是，$（“。district”）。点击不会开火。我甚至尝试为每个路径分配一个id并以这种方式在jquery中选择它。单击路径时如何使用jquery触发？路径位于SVG对象中。

下面的D3代码：

svg.append("defs").append("path")
.attr("id", "land")
.datum(topojson.feature(us, us.objects.land))
.attr("d", path);

svg.append("clipPath")
.attr("id", "clip-land")
.append("use")
.attr("xlink:href", "#land");

svg.append("g")
.attr("class", "districts")
.attr("clip-path", "url(#clip-land)")
.selectAll("path")
.data(topojson.feature(congress, congress.objects.districts).features)
.enter().append("path")
.attr("class","indiv_district")
.attr("d", path)
.attr("id", function(d) {  
    if(d.id !== undefined) {
        return convert_fips_district(d.id); 
    }
})

svg.append("path")
    .attr("class", "district-boundaries")
    .attr("clip-path", "url(#clip-land)")
    .datum(topojson.mesh(congress, congress.objects.districts, function(a, b) { return (a.id / 1000 | 0) === (b.id / 1000 | 0); }))
    .attr("d", path);

svg.append("path")
    .attr("class", "state-boundaries")
    .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
    .attr("d", path);

Jquery代码：

$(".indiv_district").on( "click", function() {
alert("here");
});

Answer 1

由于您只发布了部分D3代码，我无法直接测试您的代码，但我有working example如何在D3图库的line chart example上完成此操作。

总体策略与您使用的策略完全相同，这个想法应该可以正常工作，但有几点需要注意：

单个像素宽的路径很难点击。

在示例中，您可以单击图形数据线（蓝色）和x轴，但是很难单击x轴，因为它非常窄。

您必须在css中指定是否要在悬停时显示＆＃34;手＆＃34;风格的光标。

如果您没有这种反馈，很难知道您是否点击了屏幕上的正确元素。尝试在css中为路径指定一个游标属性。

cursor: pointer;

希望这会有所帮助，并且您可以按照自己的方式运行代码。如果您仍然无法找到错误，我想进一步提供帮助，但我需要您发布所有D3绘图代码和css，或者制作一个存在错误的JSFiddle。