Как добавить кнопку foreignObject в d3 SVG

Question

Я хочу создать всплывающее окно div в моем SVG и добавить кнопки к этому div .I создать foreignObject внутри SVG и кнопка добавить к этому foreignObject.I пытаюсь вызвать функцию Java Script, используя кнопка на клике event.but внутри 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> 

Попробуйте другой браузер.

• Край 25.1 не работает. Даже отрисуйте кнопку.
• Вы говорите мне Chrome ни
• Я использую Opera 38 и работает хорошо

Очевидно, что это реализация браузера зависимую. Вы будете нуждаться в некоторых workaround.-

Перед

После