Javascript 在D3提示触发点击事件中生成HTML元素

我试图从D3 tip元素内的按钮触发一个点击事件，如下所示：

var tip = d3.tip()
        .attr('class', 'd3-tip')
        .html(function(d) {
            var html = "<div class='row text-center'><div class='col-md-4 no-gutters'>" +
                       "<button class='btnn btnn-purple pull-left textSmall' id='1'>1</button>" +
                       "</div><div class='col-md-4 no-gutters'>" +
                       "<button class='btnn btnn-yellow pull-left textSmall' id='2'>2</button>" +
                       "</div><div class='col-md-4 no-gutters'>" +
                       "<button class='btnn btnn-aqua pull-right textSmall' id='3'>3</button>"

            return html;
    });

$("#1").on('click', function() {
     d3.select("#node1").style("opacity", 0);
});

var tip=d3.tip（）
.attr（'class'，'d3 tip'）
.html（函数（d）{
var html=“”+
"1" +
"" +
"2" +
"" +
"3"
返回html；
});
$（“#1”）。在（'click'，function（）上{
d3.选择（“#节点1”）.样式（“不透明度”，0）；
});

但我真正点击的唯一元素是使用class

d3 tip

而不是任何按钮。我尝试过改变z指数，但没有效果

有人有什么想法吗

谢谢

编辑：我在下面使用了Gerardo的解决方案（不是使用D3提示，而是设计我自己的），但我无法获得正确的定位-出于某种原因，当我使用

D3.event.pageX

定位工具提示时，或者当我在force布局中使用

d.x

（节点位置）时，我的工具提示会持续出现在SVG下方

为什么会这样

---

谢谢。

如果您有自己的工具提示代码，这相对简单，如下例所示。拥有自己的工具提示代码可以让您更加灵活和控制。因此，从技术上讲，这不是对你问题的回答，因为它没有使用“D3提示”

单击“运行代码片段”，并将鼠标悬停在圆圈上以显示工具提示。单击按钮1生成警报

var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，300）
.attr（“高度”，300）；
变量工具提示=d3。选择（“主体”）。追加（“div”）
.attr（“类”、“工具提示”）
.样式（“不透明度”，0）；
var circle=svg.append（“circle”）
.attr（“cx”，150）
.attr（“cy”，150）
.attr（“r”，100）
.attr（“填充”、“钢蓝”）；
circle.on（“mouseover”，function（））{
html（“按钮1按钮2”）
.style（'top'，d3.event.pageY-10+'px'）
.style（'left'，d3.event.pageX+10+'px'）
.样式（“不透明”，1）；
d3.选择（“#but1”）。在（“单击”，函数（）{alert（“按钮1单击”）}）；
});
div.tooltip{
位置：绝对位置；
文本对齐：左对齐；
空白：正常；
填充：4px；
字体大小：14px；
背景：谭；
边框：1px纯色灰色；
}
如果您有自己的工具提示代码，这相对简单，如下例所示。拥有自己的工具提示代码可以让您更加灵活和控制。因此，从技术上讲，这不是对你问题的回答，因为它没有使用“D3提示”

单击“运行代码片段”，并将鼠标悬停在圆圈上以显示工具提示。单击按钮1生成警报


var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，300）
.attr（“高度”，300）；
变量工具提示=d3。选择（“主体”）。追加（“div”）
.attr（“类”、“工具提示”）
.样式（“不透明度”，0）；
var circle=svg.append（“circle”）
.attr（“cx”，150）
.attr（“cy”，150）
.attr（“r”，100）
.attr（“填充”、“钢蓝”）；
circle.on（“mouseover”，function（））{
html（“按钮1按钮2”）
.style（'top'，d3.event.pageY-10+'px'）
.style（'left'，d3.event.pageX+10+'px'）
.样式（“不透明”，1）；
d3.选择（“#but1”）。在（“单击”，函数（）{alert（“按钮1单击”）}）；
});
div.tooltip{
位置：绝对位置；
文本对齐：左对齐；
空白：正常；
填充：4px；
字体大小：14px；
背景：谭；
边框：1px纯色灰色；
}
你能不能把一个我们可以玩的示例JSFIDLE放在一起？你能不能把一个我们可以玩的示例JSFIDLE放在一起？添加“原始”html不是最好的主意？谢谢，但我不知道如何将它放在触发工具提示的节点上方。知道怎么做吗？我不使用D3提示，所以我不能说。在我的示例中，它是关于鼠标坐标完成的，但是您可以混合使用
this
和
offsetTop
/
offsetLeft
来完成。但真正的挑战是：在我的示例中，我没有为工具提示设置
mouseout
，因此您可以单击它。但是你必须在离开元素后使工具提示消失！谢谢我避免使用D3提示，而是使用您的方式，但在我的页面上，当我尝试通过单击节点来触发出现的工具提示时，它会将提示定位在页面底部，而不是鼠标事件指定的坐标。哦，这是因为在我的工具提示中，
div
有一个“绝对”位置，在CSS中定义。这不是添加“原始”html的最佳方法。谢谢，但我不知道如何将其放置在触发工具提示的节点上方。知道怎么做吗？我不使用D3提示，所以我不能说。在我的示例中，它是关于鼠标坐标完成的，但是您可以混合使用
this
和
offsetTop
/
offsetLeft
来完成。但真正的挑战是：在我的示例中，我没有为工具提示设置
mouseout
，因此您可以单击它。但是你必须在离开元素后使工具提示消失！谢谢我避免使用D3提示，而是使用您的方式，但是在我的页面上，当我尝试通过单击节点来触发出现的工具提示时，它会将提示定位在页面底部，而不是鼠标事件指定的坐标。哦，这是因为在我的工具提示中，
div
有一个在CSS中定义的“绝对”位置。