javascript - Make svg:path easily clickable -
i working d3 visualizing graph. used svg:path drawing links. want links clickable. put onclick event on them works if click on line , narrow click on. decided add path child original 1 , make invisible , fatter user can click on easily. code adding dummy paths child of original one.
paths=link.append("svg:path") .attr("class", function(d) { return "link " + d.type; }) .attr("marker-end", function(d) { return "url(#" + d.type + ")"; }) .style("stroke",function(d){ if(d.uid=="merged")return merged_edge_color; else return "#000"; }).style("stroke-width",function(d){ if(d.uid=="merged")return 4; else return 2; }).on("mouseover", edge_click); paths.append("svg:path").attr("class","path_clickable") .style("stroke-width",5).style("stroke","#000") .on("mouseover", edge_click);
the edge_click function function handle clicks. , update d attribute of dummy paths respect original paths. problem when load graph cannot see dummy paths i've added. see in firefox inspector:
<path d="m519.6082605229858,264.2807401557369a963797.516994379,963797.516994379 0 0,1 465.2163670278527,322.64265504894405" style="stroke-width: 5; stroke: rgb(0, 0, 0);" class="path_clickable"></path> <path d="m519.6082605229858,264.2807401557369a963797.516994379,963797.516994379 0 0,1 465.2163670278527,322.64265504894405" style="stroke-width: 5; stroke: rgb(0, 0, 0);" class="path_clickable"></path>
there no difference between them except class name. inspector doesn't show when select dummy one.
Comments
Post a Comment