How to add both click and double click event in svg D3charts

Question

How to add both click and double click event in svg D3charts. I tried this code. Iam using D3 charts.. I devoleped Tooltip but i need to create a div to show the data on double click to copy data, i have a click event where in that event child-parent hiding take place. I want to implement double click in svg to to show a div.

//function for Toggle child and parent![enter image description here][1]
function click(d) {
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update(d);
}

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

var nodeEnter = node.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
.on("click", click)
.on("mouseover", function(d) { // http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html
divToolTip.transition()
.duration(200)
.style("opacity", 1);

divToolTip
.html("

"+d.Name + "
" + d.Designation + "

" +
"RO: " + (d.RO != d.New_RO ? "" + d.RO + " > " + d.New_RO + "" : d.RO) + "
" +
"Branch: " + d.Branch + "
" +
"Division: " + d.Division + "
" +
"Team (Direct + Indirect): " + d._childCounter + " + " + (d._grandChildCounter - d._childCounter) + "

" +
"

" +
"<IMG >

")
.style("left", (d3.event.pageX + 20) + "px")
.style("top", (d3.event.pageY - 20) + "px");
})
.on("mouseout", function(d) {
divToolTip.transition()
.duration(500)
.style("opacity", 0);
});

nodeEnter.append("circle")
.attr("r", 1e-6)
.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; })
.style("stroke", function(d) { return (d.RO != d.New_RO ? "red" : "steelBlue")});

nodeEnter.append("text")
.attr("x", function(d) { return d.children || d._children ? -10 : 10; })
.attr("dy", ".35em")
.attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
.style("fill-opacity", 1e-6)
.attr("class", function(d) { return d.Designation + (d._HighlightFlag? " SearchHighlight" : ""); })
.text(function(d) { return d.Name });



I tried this code

.on("dblclick", dblclick)

function dblclick(d) {
//i want to show the div here to copy datas.
}

Please help me to write code :

And also i need to hide the div when any click is made in the page or form i svg. Please help me

On double clicking each node i have to show a div . How to add show the div.Please help me. And also i need to hide the div when any click is made in the page or form in svg. Please help me.