D3 Examples - Drop down in foreignObject

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<script type="text/javascript">
    var svg = d3.select("body").append("svg")
        .attr("width", 200)
        .attr("height", 100);
  
    var data = ["Node1"]
  
    var node = svg.selectAll(".node")
        .data(data)
        .enter()
        .append("g")
        .attr("transform", "translate(50,50)")
    
    node.append("circle")
        .attr("cx", 0)
        .attr("cy", 0)
        .attr("r", 10)
        .on("click", function(d){
        let div = d3.select(this.parentNode).select("div")
        let newValue = div.style("display") == "none" ? "block" : "none"
        div.style("display", newValue)
        })
​
    var nodeSelect = node.append("foreignObject")
        .attr("width", 100)
        .attr("height", 100)
        .append("xhtml:body")
            .append("div")
            .append("select")
    
    nodeSelect.selectAll("option")
        .data(function(d){
            let options = [d,"delete","edit"]
          return options
            })
        .enter()
        .append("option")
        .attr("value", function(d){ return d })
        .text(function(d){ return d })
​
        
</script>
</body>
</html>
    