Click here to Skip to main content
15,888,113 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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


[1]: http://i.stack.imgur.com/fVBjL.jpg


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.
Posted
Updated 30-Mar-15 8:44am
v2

1 solution

1. Showing and hiding of div can be done by setting style.visibility property as hidden and visible

reference: http://www.w3schools.com/jsref/prop_style_visibility.asp

2. On double click you want copy the data which is nothing but recreation of another. For which create another div copy the html value of the previous one to the new one

Note: set the id attribute for the div you created then only you can perform both the operation
 
Share this answer
 
Comments
Averla 30-Mar-15 22:54pm    
@ramyajaya already i have a click event and mouse over and mouse out funtion. and i want to implement a double click event to show div like tool tip to show data. how can i add double click event to svg.??
ramyajaya 31-Mar-15 2:05am    
In this link http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html whichbyou have given itself holds tye dblclick event information
Averla 31-Mar-15 3:18am    
@ramyajaya i have added tooltip but here i want a div to show data like tooltip to copy data. So how to add a double click event in svg and how to add div in that click event..
ramyajaya 31-Mar-15 5:23am    
As per my understanding

1. you have to invoke a event on dblclick for double click event


2. Add a div on double click as a tooltip displaying data for copying

Refer this url to show a div as tooltip http://www.codeproject.com/Articles/651387/Creating-Javascript-Tooltips-Has-Never-Been-This-E


Hope it helps
Averla 31-Mar-15 5:32am    
i got but now i have to hide that div whenever a click is done in the page .. how can i ? how to write click funtion in svg to hide that div.? please help ,me

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900