javascript - How to split single line into multiple lines? -


i've been looking how split single line multiple lines using d3. when user clicks single line split on click. can't find examples online on how this. can let me know if possible? thank in advance!

d3:

var link = svg.selectall(".link")       .data(force.links())       .enter().append("line")       .attr("class", "link")       .style("stroke-width", function(d) {         if(d.value < 76742302){           return 1;         }else if(d.value < 159879796){           return 2;         }else if (d.value < 354232554) {           return 3;         }else if (d.value < 695427312) {           return 4;         }else{           return 5;         }       }); 

'svg:line' have x1, y1, x2, y2 values.

you can use basic algebra calculate line equation (http://www.coolmath.com/algebra/08-lines/12-finding-equation-two-points-01)

and find point want split line , create 2 new line elements.

if want split half way find mid point x1 + x2 / 2 , y1 + y2 / 2 , create 2 new lines , append them parent , remove current.

on click add new line start mid add new line mid end remove self 

Comments

Popular posts from this blog

javascript - Using jquery append to add option values into a select element not working -

Android soft keyboard reverts to default keyboard on orientation change -

jquery - javascript onscroll fade same class but with different div -