Question

我有一个svg元素，其中包含一个应用了工具提示的圆。

我正在使用D3 selection.html()将此元素及其内容克隆到新的div中。这可行，但是不会复制工具提示。如何在新的div中添加工具提示功能？

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://d3js.org/d3.v5.min.js"></script>    
  </head>

  <body>
    <!-- Create a div containing the action button -->
    <div class="container" id = "div1">
      <button type="button"   onclick=clone() >Clone</button>       
    </div> 
    <!--Create a div that will hold the initial circle  -->
    <div class="container" id = "div2">
    </div> 
    <!--Create a div that will hold the cloned circle  -->
    <div class="container" id = "div3">
    </div>    
  </body>   
  <script>
    //Create an empty div that will hold the tooltip
    var div = d3.select("body").append("div")
      .attr("class", "tooltip")
      .style("opacity", 0);


    //Create some data 
    var mydata=
      [{"xval":50,"yval":50,"mytooltip":"first"}
      ,{"xval":100,"yval":100,"mytooltip":"second"}
      ]
    //Append the SVG element  
    var svg = d3.select("#div2")
      .append("svg") 
      .attr("width",500)
      .attr("height", 500);
    
    //Draw a circle for each row of data
    svg.selectAll("circle")
      .data(mydata).enter()
      .append("circle")
      .attr("cx", function(d){return d.xval})
      .attr("cy", function(d){return d.yval})
      .attr("r", 10) 
      .on("mouseover", function(d) {
       div.transition()
         .duration(200)
         .style("opacity", .9);
       div.html( d.mytooltip)
       })
      .on("mouseout", function(d) {
       div.transition()
         .duration(500)
         .style("opacity", 0);
       });
    //Copy the SVG element this works but the tooltup functionality is not copied     
    function clone() {
      var content = d3.select("#div2").html();
      var mymod = d3.select("#div3")
      .html(content);
    }
  </script>

</html>

完整的问题-万一我以错误的方式进行操作

我有一系列svg元素，每个div包含一个图形，这些图形的数据点可以使用用户输入进行过滤，并且具有工具提示。

我希望用户能够将单个图形放大为模态。我可以通过调用在模态加载时再次绘制图形的函数来做到这一点，但是这会引起问题，因为我需要重新应用过滤。

因此，我正在使用selection.html将单个图形克隆到工具提示中（从而继承了过滤条件）。除不复制工具提示功能外，此方法有效。我该如何纠正。

D3 selection.html（），复制工具提示

0 个答案: