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
Post a Comment