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

Question

我想在我的SVG中创建弹出窗口

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>' );

Answer 1

这对我有用：

<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>

尝试不同的浏览器。

• Edge 25.1 不起作用。甚至渲染按钮。
• 你也不告诉我 Chrome
• 我正在使用 Opera 38 并且运行良好

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

之前

之后

Answer 2

根据另一个 stackoverflow 线程：D3 - 无法在单击事件上获取数据参数

你可以使用

.on("click", function(e, d) {..})

其中 d 是节点数据