javascript - Drawing arrows using d3 -

javascript - Drawing arrows using d3 -

in fiddle i'm attempting draw arrow :

var svgcontainer = d3.select("body").append("svg") .attr("width", 1200) .attr("height", 1200) .attr("text-align" , "center"); var arrowstartposition = 5 var arrowspacing = 60 var verticalstrokecolor = "black" var arrowystartposition = 5 var arrowyendstartposition = 150 var margin = 150; var labelline = svgcontainer.append("line") .attr("x1", arrowstartposition + margin) .attr("y1", arrowystartposition) .attr("x2", arrowstartposition + margin) .attr("y2", arrowyendstartposition) .attr("stroke-width", 2) .attr("stroke", verticalstrokecolor); var right = svgcontainer.append("line") .attr("x1", arrowstartposition + margin) .attr("y1", arrowystartposition) .attr("x2", 20 + margin) .attr("y2", 20) .attr("stroke-width", 2) .attr("stroke", "black"); var left = svgcontainer.append("line") .attr("x1", right.attr("x1")-15) .attr("y1", right.attr("y1")+15) .attr("x2", 5 + margin) .attr("y2", 5) .attr("stroke-width", 2) .attr("stroke", "black");

to seek , maintain code generic i'm attempting maintain draw left part of arrow depending on position of right :

.attr("y1", right.attr("y1")+15)

but can seen in fiddle :

http://jsfiddle.net/qh9x5/3447/

the arrow not beingness drawn correctly.

i think because right.attr("y1") value not initialized @ time of drawing ?

any pointers on more elegant method of achieving same result appreciated.

if you're going define left's position based on right's position, value needs changed x2.

var left = svgcontainer.append("line") .attr("x1", right.attr("x1")) .attr("y1", right.attr("y1")) .attr("x2", right.attr("x2")-30) .attr("y2", right.attr("y2")) .attr("stroke-width", 2) .attr("stroke", "black");

jsfiddle

javascript jquery d3.js