Javascript 如何在d3 SVG中向foreignObject添加按钮

我想在我的SVG中创建popup

div

，并将按钮添加到该

div

中。我在SVG中创建

foreignObject

，并将按钮添加到该foreignObject中。我试图使用单击事件上的按钮调用java脚本函数。但在foreignObject按钮中，没有给出它的功能

.on('mouseover', function() {
    var trashfuntion = function(){
        console.log("click")
    }
                var fo = svg.append('foreignObject')
                    .attr({
                        'x': anchor.w - tip.w,
                        'y': anchor.h + tip.h,
                        'width': foWidth,
                        'class': 'svg-tooltip'
                    });
                var div = fo.append('xhtml:div')
                    .append('div')
                    .attr({
                        'class': 'tooltip'
                    });
                div.append('div')
                    .attr('class', 'lead')
                    .html('<button onclick="trashfuntion()">Click Me</button>' );

.on（'mouseover'，function（）{
var trashfuntion=函数（）{
console.log（“单击”）
}
var fo=svg.append（'foreignObject'）
艾特先生({
“x”：anchor.w-tip.w，
“y”：锚点.h+tip.h，
“宽度”：foWidth，
“类”：“svg工具提示”
});
var div=fo.append（'xhtml:div'）
.append（'div'））
艾特先生({
“类”：“工具提示”
});
div.append（'div'）
.attr（'class'，'lead'）
.html（“单击我”）；

这对我来说很有用：

<svg id="mySvg"></svg>
<script>
var svg = d3.select("#mySvg")
var fo = svg.append('foreignObject')
  .attr({
  'x': 20, //anchor.w - tip.w,
  'y': 20, //anchor.h + tip.h,
  'width': 220,//foWidth,
  'class': 'svg-tooltip'
  });
 var div = fo.append('xhtml:div')
   .append('div')
   .attr({
   'class': 'tooltip'
    });
 div.append('div')
    .attr('class', 'lead')
    .html('<button onclick="trashfuntion()">Click Me</button>' );

 function trashfuntion() {
     console.log("click")
 }
</script>

var svg=d3。选择（“mySvg”）
var fo=svg.append（'foreignObject'）
艾特先生({
'x'：20，//anchor.w-tip.w，
“y”：20，//anchor.h+tip.h，
“宽度”：220，//foWidth，
“类”：“svg工具提示”
});
var div=fo.append（'xhtml:div'）
.append（'div'））
艾特先生({
“类”：“工具提示”
});
div.append（'div'）
.attr（'class'，'lead'）
.html（“单击我”）；
函数垃圾函数（）{
console.log（“单击”）
}

尝试其他浏览器

• Edge 25.1不起作用。甚至渲染按钮
• 你也不告诉我
• 我用的是Opera 38，效果很好

显然，这取决于浏览器的实现。您需要一些解决方法-

以前

之后

---

这对我来说很有用：

<svg id="mySvg"></svg>
<script>
var svg = d3.select("#mySvg")
var fo = svg.append('foreignObject')
  .attr({
  'x': 20, //anchor.w - tip.w,
  'y': 20, //anchor.h + tip.h,
  'width': 220,//foWidth,
  'class': 'svg-tooltip'
  });
 var div = fo.append('xhtml:div')
   .append('div')
   .attr({
   'class': 'tooltip'
    });
 div.append('div')
    .attr('class', 'lead')
    .html('<button onclick="trashfuntion()">Click Me</button>' );

 function trashfuntion() {
     console.log("click")
 }
</script>

var svg=d3。选择（“mySvg”）
var fo=svg.append（'foreignObject'）
艾特先生({
'x'：20，//anchor.w-tip.w，
“y”：20，//anchor.h+tip.h，
“宽度”：220，//foWidth，
“类”：“svg工具提示”
});
var div=fo.append（'xhtml:div'）
.append（'div'））
艾特先生({
“类”：“工具提示”
});
div.append（'div'）
.attr（'class'，'lead'）
.html（“单击我”）；
函数垃圾函数（）{
console.log（“单击”）
}

尝试其他浏览器

• Edge 25.1不起作用。甚至渲染按钮
• 你也不告诉我
• 我用的是Opera 38，效果很好

显然，这取决于浏览器的实现。您需要一些解决方法-

以前

之后

---

你使用什么浏览器？chrome web browser你使用什么浏览器？chrome web browser我也面临同样的问题。你在上面找到的任何解决方案都将帮助我节省时间：）我也面临同样的问题。你在上面找到的任何解决方案都将帮助我节省时间：）