HTML elements following each other along the SVG path using javascript

Question

I am trying to get some html elements to follow each other along the SVG path. I would like them to stay at the same distance from each other as they walked along the path. I would also like the SVG image to scale in the container that holds it.

I created an encoder that demonstrates what I still have: http://codepen.io/mikes000/pen/GIJab

The problem I am facing is that when the elements move along the X axis, they seem even more spaced than on the Y axis.

Is there a way to make them stay at the same distance when they travel along the line?

Thanks!

Update **

After continuing for some time, I found that the change in distance was apparently due to the aspect ratio of the SVG screen increasing for X more than for Y. When it is stretched down along the X axis 1px down, the line may 3px on the screen.

The position of the red squares is set by moving them in front and behind half the width of the black box. When moving along a line, if the aspect ratio of the viewport changes, the distance between each point of the line increases or decreases based on this.

I tried to create a similar SVG with the exact viewbox size of the div container, and the red dots are exactly at the ends of the black box to the end of the line. This does not solve the problem, because I would like the SVG with the line to scale to any container of the size in which it is placed inside.

I think that if there is a way to calculate how many pixels the size of the black box depending on how many pixels along the line covering the red dots will exactly match.

Any ideas on how to do this or which ideas are better suited to solve this problem?

Answer 1

Take a look at http://jsfiddle.net/4LzK4/

var svg = d3.select("#line").append("svg:svg").attr("width", "100%").attr("height", "100%"); var data = d3.range(50).map(function(){return Math.random()*10}) var x = d3.scale.linear().domain([0, 10]).range([0, 700]); var y = d3.scale.linear().domain([0, 10]).range([10, 290]); var line = d3.svg.line() .interpolate("cardinal") .x(function(d,i) {return x(i);}) .y(function(d) {return y(d);}) var path = svg.append("svg:path").attr("d", line(data)); var circle = svg.append("circle") .attr("cx", 100) .attr("cy", 350) .attr("r", 3) .attr("fill", "red"); var circleBehind = svg.append("circle") .attr("cx", 50) .attr("cy", 300) .attr("r", 3) .attr("fill", "blue"); var circleAhead = svg.append("circle") .attr("cx", 125) .attr("cy", 375) .attr("r", 3) .attr("fill", "green"); var pathEl = path.node(); var pathLength = pathEl.getTotalLength(); var BBox = pathEl.getBBox(); var scale = pathLength/BBox.width; var offsetLeft = document.getElementById("line").offsetLeft; var randomizeButton = d3.select("button"); svg.on("mousemove", function() { var x = d3.event.pageX - offsetLeft; var beginning = x, end = pathLength, target; while (true) { target = Math.floor((beginning + end) / 2); pos = pathEl.getPointAtLength(target); if ((target === end || target === beginning) && pos.x !== x) { break; } if (pos.x > x) end = target; else if (pos.x < x) beginning = target; else break; //position found } circle .attr("opacity", 1) .attr("cx", x) .attr("cy", pos.y); posBehind = pathEl.getPointAtLength(target-10); circleBehind .attr("opacity", 1) .attr("cx", posBehind.x) .attr("cy", posBehind.y); posAhead = pathEl.getPointAtLength(target+10); circleAhead .attr("opacity", 1) .attr("cx", posAhead.x) .attr("cy", posAhead.y); }); randomizeButton.on("click", function(){ data = d3.range(50).map(function(){return Math.random()*10}); circle.attr("opacity", 0) path .transition() .duration(300) .attr("d", line(data)); }); 

Instead of independently calculating the positions of the circles in the back and front, use getPointAtLength relative to the center of the object, which should remain in the middle.

Inspired by: http://bl.ocks.org/duopixel/3824661