D3路径上的Jquery点击事件

Question

我第一次使用D3来展示美国所有国会选区的 map 。我还想将 jquery 与 D3 结合使用。我无法在 jquery 中捕获每个区路径的点击事件。每条路径都有一个分配给它的“区”类。但是， $(".district").click 不会触发。我什至尝试为每个路径分配一个 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如何在 line chart example 上完成此操作来自 D3 画廊。

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

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

在示例中，您可以单击图形数据线(蓝色)和 x 轴，但单击 x 轴非常困难，因为它太窄了。

如果您希望悬停时出现“手”式光标，则必须在 CSS 中指定。

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

cursor: pointer;

希望这对您有所帮助，并让您的代码按照您想要的方式工作。如果您仍然找不到错误，我想进一步提供帮助，但我需要您发布所有 D3 绘图代码和 css，或者制作一个包含存在错误的 JSFiddle。