Waypoint names

[hupe13]

Hi Raruto,

please see your example. The name of the waypoint goes beyond the edge.. Can you please change that?

Thank you very much.

[Raruto]

Hi hupe, if you want to investigate a bit you can look at here:

https://github.com/Raruto/leaflet-elevation/blob/3ee745d71ed172979b7bfe0ff52f7c63214d3c04/src/components/chart.js#L416-L442

https://github.com/Raruto/leaflet-elevation/blob/3ee745d71ed172979b7bfe0ff52f7c63214d3c04/src/components/d3.js#L430-L487

Honestly, if you don't have a clever solution, i don't think i'll get into it. Anyway, feel free to let me know if you need help understanding the logic behind d3.

Have a nice day, Raruto

[Raruto]

Hi @hupe13,

just to give you a starting point:

CSS only solution (-25deg)

.point > text {
  text-anchor: middle;
  transform: translateY(-5px) rotate(-25deg);
}

JS only solution (+90deg)

controlElevation.on('elechart_init elechart_axis', function(e) {
  d3
    .selectAll('.point > text')
    .attr('dy', '-8px')
    .attr("dx", (d, i, el) => (this._height() - d3.select(el[i].parentElement).datum().y /*- el[i].getComputedTextLength()*/ - 10) + 'px')
    .attr('text-anchor', 'end')
    .attr('transform', 'rotate(90)');
});

JS only solution (-90deg)

I think this kind of skew might be more readable, ~~but I'll leave to you the practice with d3js...~~

---

Anyway, if you manage to produce something interesting we can also evaluate whether to merge it

👋 Raruto

[Raruto]

@hupe13 and here is a more readable solution than https://github.com/Raruto/leaflet-elevation/issues/211#issuecomment-1442421078

A lot depends on the type of data you're showing (text lengths, waypoints density, chart height, ...), also for this reason I think it's not that easy to code an all-in-one (and simple) solution that can work for everyone.

JS only solution (-90deg)

/**
 * Tested with leaflet-elevation v2.2.8:
 * 
 * - apply -90 deg rotation (waypoint labels)
 * - thinner circles style (waypoint dots)
 */

controlElevation.on('elechart_init elechart_axis', function(e) {

  const pointG = this._chart._chart.pane('point');

  pointG.selectAll('text')
    .attr('dy', '4px')
    .attr("dx", (d, i, el) => (-this._height() + d3.select(el[i].parentElement).datum().y + 5) + 'px')
    .attr('text-anchor', 'start')
    .attr('transform', 'rotate(-90)')

  pointG.selectAll('circle')
    .attr('r', '2.5')
    .attr('fill', '#fff')
    .attr("stroke", '#000')
    .attr("stroke-width", '1.1');

});

👋 Raruto