我有一个具有缩放功能的 d3 地图,其中有代表各个城市的圆圈。由于某种原因,当我将鼠标悬停在圆圈上时(鼠标悬停会显示工具提示,单击会显示一些行),很难让它注册。它似乎只在圆圈的边界附近注册,而不是整个形状,但我还没有找到可识别的图案。这是我的相关代码:
.CSS:
circle {
stroke-width: 1.5px;
stroke: "green";
cursor: pointer;
}
Javascript:
var node = g.selectAll(".node")
.data(data.nodes)
.enter()
.append("circle")
.attr("cx", function(d) {
return projection([-1 * d.lon, -1 * d.lat])[0];
})
.attr("cy", function(d) {
return projection([-1 * d.lon, -1 * d.lat])[1];
})
.attr("r", 3)
.style("fill", function(d) {
return line_color([Math.floor(d.diversity * num_lines)])
})
.style("stroke", "#000000")
.style("stroke-width", "0.05px")
.on('mouseover', tip.show)
.on("click", fade(0))
.on('mouseout', tip.hide);
这是在行动,以证明问题
我同意@BenLyall的观点,因为在圆圈之后绘制链接是导致问题的原因。在 SVG 中,深度由元素的绘制顺序控制。但是,更简单的解决方案是使链接忽略指针事件。尝试向链接添加.style("pointer-events", "none")
。我使用您提供的链接中的开发人员工具做到了这一点,并且一旦您移动到圆圈上,就会显示工具提示。
您的链接是在节点之后绘制的,这意味着它们位于节点的"顶部"。 指针事件没有进入圆圈,因为链接掩盖了它。
在你的代码中,你有
var data = d3.json("data/city_data.json", function(error, data) {
var num_lines = data.links.length;
var line_color = d3.scale.sqrt().domain([0, num_lines]).range(["#99CCFF", "#000066"]); //scale color by sqrt to seperate it out
var node = g.selectAll(".node")
.data(data.nodes)
.enter()
.append("circle")
.attr("cx", function(d) {
return projection([-1 * d.lon, -1 * d.lat])[0];
})
.attr("cy", function(d) {
return projection([-1 * d.lon, -1 * d.lat])[1];
})
.attr("r", 3)
.style("fill", function(d) {
return line_color([Math.floor(d.diversity * num_lines)])
})
.style("stroke", "#000000")
.style("stroke-width", "0.05px")
.on('mouseover', tip.show)
.on("click", fade(0))
.on('mouseout', tip.hide);
var link = g.selectAll(".link")
.data(data.links)
.enter()
.append("line")
.attr("class", "link")
.style("stroke-opacity", 0)
.style("stroke", function(d) {
return line_color([Math.floor(d.nlp_1 * num_lines)]);
})
.style("stroke-width", 1);
link.attr("x1", function(d) {
source_node = data.nodes[d.source];
return projection([-1 * source_node.lon, -1 * source_node.lat])[0];
})
.attr("y1", function(d) {
source_node = data.nodes[d.source];
return projection([-1 * source_node.lon, -1 * source_node.lat])[1];
})
.attr("x2", function(d) {
target_node = data.nodes[d.target];
return projection([-1 * target_node.lon, -1 * target_node.lat])[0];
})
.attr("y2", function(d) {
target_node = data.nodes[d.target];
return projection([-1 * target_node.lon, -1 * target_node.lat])[1];
});
尝试执行以下操作:
var data = d3.json("data/city_data.json", function(error, data) {
var num_lines = data.links.length;
var line_color = d3.scale.sqrt().domain([0, num_lines]).range(["#99CCFF", "#000066"]); //scale color by sqrt to seperate it out
var link = g.selectAll(".link")
.data(data.links)
.enter()
.append("line")
.attr("class", "link")
.style("stroke-opacity", 0)
.style("stroke", function(d) {
return line_color([Math.floor(d.nlp_1 * num_lines)]);
})
.style("stroke-width", 1);
link.attr("x1", function(d) {
source_node = data.nodes[d.source];
return projection([-1 * source_node.lon, -1 * source_node.lat])[0];
})
.attr("y1", function(d) {
source_node = data.nodes[d.source];
return projection([-1 * source_node.lon, -1 * source_node.lat])[1];
})
.attr("x2", function(d) {
target_node = data.nodes[d.target];
return projection([-1 * target_node.lon, -1 * target_node.lat])[0];
})
.attr("y2", function(d) {
target_node = data.nodes[d.target];
return projection([-1 * target_node.lon, -1 * target_node.lat])[1];
});
var node = g.selectAll(".node")
.data(data.nodes)
.enter()
.append("circle")
.attr("cx", function(d) {
return projection([-1 * d.lon, -1 * d.lat])[0];
})
.attr("cy", function(d) {
return projection([-1 * d.lon, -1 * d.lat])[1];
})
.attr("r", 3)
.style("fill", function(d) {
return line_color([Math.floor(d.diversity * num_lines)])
})
.style("stroke", "#000000")
.style("stroke-width", "0.05px")
.on('mouseover', tip.show)
.on("click", fade(0))
.on('mouseout', tip.hide);
您在 SVG 中最后绘制的项目将位于顶部。 这样做的好处是可以整理可视化,因此链接的端点位于节点下方,使其看起来更整洁。
将.style("pointer-events", "all")
添加到圆圈中。默认设置是仅将鼠标悬停在可见的内容上,但无论是否渲染,您都希望在内部显示任何内容。
这是一个显示它工作的小提琴