Phae7rae - 11 months ago 56

Javascript Question

I display a line chart with D3 with roughly the following code (given the scale functions

`x`

`y`

`data`

`var line = d3.svg.line()`

.interpolate("basis")

.x(function (d, i) { return x(i); })

.y(function (d) { return y(d); });

d3.select('.line').attr('d', line(data));

Now I want to know the

`data`

`data`

Any hints?

Answer Source

**Edited 19-Sep-2012 per comments** *with many thanks to nrabinowitz!*

You will need to do some sort of search of the data returned by `getPointAtLength`

. (See https://developer.mozilla.org/en-US/docs/DOM/SVGPathElement.)

```
// Line
var line = d3.svg.line()
.interpolate("basis")
.x(function (d) { return i; })
.y(function(d, i) { return 100*Math.sin(i) + 100; });
// Append the path to the DOM
d3.select("svg#chart") //or whatever your SVG container is
.append("svg:path")
.attr("d", line([0,10,20,30,40,50,60,70,80,90,100]))
.attr("id", "myline");
// Get the coordinates
function findYatX(x, linePath) {
function getXY(len) {
var point = linePath.getPointAtLength(len);
return [point.x, point.y];
}
var curlen = 0;
while (getXY(curlen)[0] < x) { curlen += 0.01; }
return getXY(curlen);
}
console.log(findYatX(5, document.getElementById("myline")));
```

For me this returns [5.000403881072998, 140.6229248046875].

This search function, `findYatX`

, is far from efficient (runs in *O(n)* time), but illustrates the point.