Drop down in foreignObject

forked from biovisualize's block: Drop down in foreignObject

<!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>

https://d3js.org/d3.v4.min.js