Elevation chart intersection points with d3.js

corinat commented 4 years ago

Hi Raruto.

Not really an issue, more of a question about how to add circles on top of the elevation graph, something similar to: https://bl.ocks.org/d3noob/38744a17f9c0141bcd04

The circles will come from a geojson file.

What I would like is just some tips on where to look in your code to make the changes, if you don't mind. I am not really an expert in JavaScript, that's why some suggestions on how to approach this would be much appreciated.

I didn't find any e-mail, so I am just writing this here.

In the end I just want to thank you for developing this project!

Raruto commented 4 years ago

Hi Corina,

I think you can start comparing your example from the following point: https://github.com/Raruto/leaflet-elevation/blob/447201b70a50bacf432da2e21ab74c9083d34bbb/leaflet-elevation.js#L1130

In particular the following function should be responsible for adding dots to your scatter plot:

...

  // Add the scatterplot

  svg.selectAll("dot")
     .data(data)
     .enter().append("circle")
     .attr("r", 3.5)
     .attr("cx", function(d) { return x(d.date); })
     .attr("cy", function(d) { return y(d.close); });

...

In your tests, to avoid editing library code, you can access to the <svg> element as follows:

var controlElevation = L.control.elevation( ... ); // leaflet.js chart object
var svg = d3.select(controlElevation.getContainer()).select("svg"); // d3.js object

Have a Good Day, Raruto

corinat commented 4 years ago

Thank you very much!

Raruto commented 4 years ago

Nice to help you, in case you will succeed, could you also provide an example to add to the others?

corinat commented 4 years ago

Definitely!

Raruto / leaflet-elevation

Elevation chart intersection points with d3.js #34