I want to draw a graph where I can move the dots ( circle
) of a line into JavaScript. When you move the object circle
, the line is always pasted to the circle.
I want to make the genre look like this:
Thatis,itisalineforeachcircle,beingpossibletomovethemandgettheirpositions.
ThebasegraphicisthefollowingSVG,whichisasortofCartesianplane:
<svg id="svg" width=100% height=500px >
//vertical
<line title="Vertical" x1=60 y1=60 x2=60 y2=450 stroke-width=2 stroke=black />
//text vertical
<text x=60 y=60 text-anchor=end fill=black ><?php echo $txtmaxresistance." Ohm";?></text>
<text x=55 y=450 text-anchor=end fill=black ><?php echo $txtminresistance;?></text>
//horizontal
<line title="Horizontal" x1=60 y1=450 x2=450 y2=450 stroke-width=2 stroke=black />
//text horizontal
<text x=470 y=465 text-anchor=end fill=black ><?php echo $txtmaxtemp." Temp";?></text>
<text x=80 y=465 text-anchor=end fill=black ><?php echo $txtmintemp;?></text>
<line title=<?php echo $txtnome;?> x1=400 y1=90 x2=60 y2=450 stroke-width=2 stroke=black />
</svg>
The following code creates the various circles (points) on top of a line:
var svg = document.querySelector('svg');
for (var i = 0; i < step; i++) {
var x = 30*i;
var y = 30*i;
var shape = document.createElementNS("http://www.w3.org/2000/svg", "circle");
shape.setAttributeNS(null, "cx", 100+x);
shape.setAttributeNS(null, "cy", 400-y);
shape.setAttributeNS(null, "r", 5);
shape.setAttributeNS(null, "fill", "green");
svg.appendChild(shape);
}