如何在svg D3charts中添加单击和双击事件 [英] How to add both click and double click event in svg D3charts
问题描述
如何在svg D3charts中添加单击和双击事件。我试过这段代码。我使用D3图表..我开发了工具提示，但我需要创建一个div来显示双击复制数据的数据，我有一个点击事件，在那个事件中，子父隐藏发生。我想在svg中实现双击以显示div。
//切换孩子和父母的功能！[在此输入图像描述] [1]
函数点击（d）{
if（d.children）{
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
更新（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）{returntranslate（+ source.y0 +，+ source.x0 +）;}}
.on（点击，点击）
.on（mouseover，function（d）{// http://www.d3noob.org/2013/01/adding-tooltips -to-d3js-graph.html
divToolTip.transit离子（）
.duration（200）
.style（opacity，1）;
divToolTip
.html（
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.Designation +
+
RO： +（d.RO！= d.New_RO？+ d.RO +>+ d.New_RO +：d.RO）+
+
分支：+ d.Branch +
+
分部：+ d。分部+
+
团队（直接+间接）：+ d._childCounter +++（d._grandChildCounter - d._childCounter） +
" + 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>
"<IMG >
）
.style（left，（d3.event.pageX + 20）+px）
.style（top， （d3.event.pageY - 20）+px）;
}）
.on（mouseout，函数（d）{
divToolTip.transition（）
。dudu（500）
.style（不透明度，0）;
}）;
nodeEnter.append（circle）
.attr（r，1e-6）
.style（fill，function（d）{return d ._children？lightsteelblue：＃ftf;}）
.style（stroke，function（d）{return（d.RO！= d.New_RO？red： steelBlue）}）;
nodeEnter.append（text）
.attr（x，function（d）{返回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}）;
我试过这个代码
.on（dblclick，dblclick）
函数dblclick（d）{
//我想在这里显示div来复制数据。
}
请帮我编写代码：
我还需要在页面或表格中进行任何点击时隐藏div svg。请帮帮我
[1]：http：//i.stack.imgur.com/fVBjL.jpg
双击每个节点我必须显示一个div。如何添加显示div。请帮助我。而且我需要在svg中的页面或表单中进行任何单击时隐藏div。请帮帮我。
")
.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.
推荐答案
1。显示和隐藏div可以通过将style.visibility属性设置为隐藏和可见来完成
参考：http：//www.w3schools.com/jsref/prop_style_visibility。 asp
2.双击你想复制的数据只是另一个的娱乐。为此创建另一个div副本，将前一个的html值复制到新的一个
注意：为你创建的div设置id属性然后只能执行这两个操作
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
这篇关于如何在svg D3charts中添加单击和双击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
