如何在d3中实现交互式工具提示

时间:2018-03-09 12:55:02

标签: javascript html css d3.js svg

我有一个显示onclick强制定向布局图节点的工具提示,如下所示。我在工具提示中添加了按钮和链接。但是我无法处理那些事件。

var div = d3.select("body").append("div")
        .attr("class", "tooltip")
        .style("opacity", 0);

var node = svg.selectAll("node")
        .data(nodes)
        .enter().append("g")
        .attr("class", "node")
        .on("click",function(d){
           div.transition()
              .duration(200)
              .style("opacity", 10);
           div.html("<b>Title1 : </b>"+"Sometext"+ "<br/>"+
                    "<b>Title2: </b>"+"SomeText" + "<br/>"+
                     "<a> show more...</a>"+ "<br/>"+
                     "<button id='popupbtn' 
                      type='submit'onclick='callme()'>close</button>")
             .style("left", (d3.event.pageX) + "px")
             .style("top", (d3.event.pageY - 60) + "px"); });

CSS

  div.tooltip {
        position: absolute;
        width: 400px;
        height: auto;
        padding: 4px;
        font: 12px sans-serif;
        background: rgba(10, 10, 20, 0.06);
        border: 3px;
        border-radius: 2px;
        pointer-events: none;
    }

如何关闭callme()中显示的工具提示/ div?

0 个答案:

没有答案