製作D3-提示觸發內的HTML元素單擊事件

我試圖觸發從我的D3-部元件內點擊一個按鈕事件像這樣：製作D3-提示觸發內的HTML元素單擊事件

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

但我實際點擊的唯一因素是類d3-tip而不是任何按鈕。我試着改變z-索引，但這並不奏效。

有沒有人有任何想法？

謝謝。

編輯：我已經使用以下（不使用D3尖而是設計自己）赫拉爾多的解決方案，但我不能讓定位正確 - 由於某種原因，我的提示不斷出現的SVG下方，當我使用d3.event.pageX來定位工具提示，或者當我在強制佈局中使用d.x（節點位置）。

這是怎麼發生的？

謝謝。

來源

2016-08-16 annikam

你能放在一起的例子的jsfiddle我們可以 – thatOneGuy

如果您有自己的工具提示代碼，這是相對簡單的，如下面的示例所示。擁有自己的工具提示代碼可以提供更多的靈活性和控制權。所以，在技術上，這是不是您的問題的答案，因爲它不使用「D3提示」。

單擊「運行代碼段」，然後將鼠標懸停在圓上以顯示工具提示。點擊按鈕1會生成警報。

var svg = d3.select("body") 
 
\t .append("svg") 
 
\t .attr("width", 300) 
 
\t .attr("height", 300); 
 
\t 
 
var tooltip = d3.select("body").append("div") \t 
 
\t .attr("class", "tooltip") \t \t \t \t 
 
\t .style("opacity", 0); 
 

 
var circle = svg.append("circle") 
 
\t .attr("cx", 150) 
 
\t .attr("cy", 150) 
 
\t .attr("r", 100) 
 
\t .attr("fill", "steelblue"); 
 
\t 
 
circle.on("mouseover", function(){ 
 
\t tooltip.html("<button id='but1'>Button 1</button><button id='but2'>Button 2</button>") 
 
\t .style('top', d3.event.pageY - 10 + 'px') 
 
\t .style('left', d3.event.pageX + 10 + 'px') 
 
\t .style("opacity", 1); 
 
\t d3.select("#but1").on("click", function(){ alert("button 1 clicked")}); 
 
});

div.tooltip { \t 
 
    position: absolute; \t \t \t 
 
    text-align: left; \t \t \t 
 
\t white-space: normal; \t \t \t \t \t 
 
    padding: 4px; \t \t \t \t 
 
    font-size: 14px; \t \t 
 
    background: tan; \t 
 
    border: 1px solid gray; \t \t 
 
}

<script src="https://d3js.org/d3.v4.min.js"></script>

來源

2016-08-16 14:22:56

它不是最好的主意打加「原」 HTML雖然 –

感謝這個，但我無法弄清楚如何將其放置在觸發工具提示的節點上方。任何想法如何做到這一點？ – annikam

我不使用D3提示，所以我不能說。在我的例子中，它是關於鼠標座標的，但是你可以用'this'和'offsetTop' /'offsetLeft'混合來完成。但真正的挑戰是：在我的例子中，我沒有爲工具提示設置'mouseout'，所以你可以點擊它。但是離開元素後，你必須讓tooltip消失！ –

製作D3-提示觸發內的HTML元素單擊事件

回答

相關問題