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

【问题标题】：d3 link static tooltip to pointsd3 将静态工具提示链接到点
【发布时间】：2014-04-30 20:25:54
【问题描述】：

我正在尝试创建散点图并希望通过单击每个点来显示工具提示。仅当取消选择（再次单击）该点时，工具提示才会消失。目前，选定的点将具有带有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);
    }
}

【问题讨论】：

标签： javascript d3.js

【解决方案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

【讨论】：

感谢您的回答。但是，我在里面创建元素是因为我希望能够选择多个点并显示所选点的所有工具提示。当每个点被取消选择时，我希望相应的工具提示消失。如果我在外面创建元素，之前选择的点的工具提示将被替换。

【解决方案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();
    }
}

【讨论】：