Question

我正在尝试创建散点图，并希望通过单击每个点来显示工具提示。仅当取消选择该点（再次单击）时，工具提示才会消失。目前，选定的点将具有r=8的黑色边框。取消选择的点与r=4.5没有可见的黑色边框。

使用下面的代码，当我取消选择积分时，工具提示不会消失。如何将工具提示链接到每个点？谢谢！

.on("click", function (d) {
    var clickTooltip = d3.select("#data_visualization").append("div").attr("class", "click_tooltip");
    if (d3.select(this).attr("r") < 8) {
        d3.select(this)
            .style("stroke", "black")
            .style("stroke-width", "2px")
            .style("stroke-opacity", 1)
            .attr("r", 8);

        clickTooltip.style("opacity", 0.62);
        var clickTooltipText = "display";
        clickTooltip.html(clickTooltipText)
                .style("left", (d3.event.pageX + 20) + "px")
                .style("top", (d3.event.pageY - 40) + "px");
    } else {
        d3.select(this)
            .attr("r", 4.5)
            .style("stroke-opacity", 0);
        clickTooltip.style("opacity", 0);
    }
}

Answer 1

每次调用单击处理程序时，您都会附加一个新元素。相反，创建一次元素，然后选择它：

var clickTooltip = d3.select("#data_visualization").append("div").attr("class", "click_tooltip");

.on("click", function (d) {
    if (d3.select(this).attr("r") < 8) {
    // etc

Answer 2

我明白了。我在这里发布我的答案，万一有人感兴趣。我们的想法是为每个工具提示div添加一个ID。稍后我们可以使用JQuery按ID删除。

.on("click", function (d) {
    var pointID = "point_" + d3.select(this).attr("cx").replace(".", "_") + "_" + d3.select(this).attr("cy").replace(".", "_");
    var clickTooltip = d3.select("#data_visualization")
                        .append("div")
                        .attr("id", pointID)
                        .attr("class", "click_tooltip");
    if (d3.select(this).attr("r") < 8) {
        d3.select(this)
            .style("stroke", "black")
            .style("stroke-width", "2px")
            .style("stroke-opacity", 1)
            .attr("r", 8);

        clickTooltip.style("opacity", 0.62);
        var clickTooltipText = "display";
        clickTooltip.html(clickTooltipText)
                .style("left", (d3.event.pageX + 20) + "px")
                .style("top", (d3.event.pageY - 40) + "px");
    } else {
        d3.select(this)
            .attr("r", 4.5)
            .style("stroke-opacity", 0);
        d3.select("#" + pointID).remove();
    }
}

d3将静态工具提示链接到点

2 个答案: