CODEWITHSUNDEEP
javascriptd3.js
zmanc
zmanc

Reputation: 5429

Get x,y location of D3 point on path

I have the below d3 chart and I need to find the x,y coordinates of the 7 points. I have tried a bunch of ways but can't seem to figure it out. I'm going to use the coordinates to create other elements that I need to put on the chart. d3.selectAll("path") gives me the array of the points I need but I'm not sure how to take those to get the coordinates.

http://jsbin.com/loluwirepi/1/edit?html,output

Chart

Upvotes: 2

Views: 2517

Answers (1)

Eric Guan
Eric Guan

Reputation: 15982

D3 scales convert a domain input into a range output. They can also do the reverse. The domain is your business content (price,time,total sales, etc.), and the range is the dimensions of the svg element. Say your 2 scales are called xScale and yScale. If you want to find the x,y point of 97,000 and 25%, find the invert of 25% in the xScale, and the invert of 97,000 in the yScale. 

var xPoint = xScale.invert(0.25)
var yPoint = yScale.invert(97000)

Upvotes: 3

Related Questions