Chart waypoint names goes beyond the edge

[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:

leaflet-elevation/src/components/chart.js

Lines 416 to 442 in 3ee745d

	/**
	* Add a point of interest over the chart
	*/
	_registerCheckPoint: function(point) {
	if (!this._data.length) return;
	const {xAttr, yAttr} = this.options;
	let item, x, y;
	if (point.latlng) {
	item = this._data[this._findIndexForLatLng(point.latlng)];
	x = this._x(item[xAttr]);
	y = this._y(item[yAttr]);
	} else if (!isNaN(point[xAttr])) {
	x = this._x(point[xAttr]);
	item = this._data[this._findIndexForXCoord(x)]
	y = this._y(item[yAttr]);
	}
	this._point.call(D3.CheckPoint({
	point: point,
	width: this._width(),
	height: this._height(),
	x: x,
	y: y,
	}));
	},

leaflet-elevation/src/components/d3.js

Lines 430 to 487 in 3ee745d

	export const CheckPoint = ({
	point,
	height,
	width,
	x,
	y
	}) => {
	return g => {
	if (isNaN(x) || isNaN(y)) return g;
	if (!point.item || !point.item.property('isConnected')) {
	point.position = point.position || "bottom";
	point.item = g.append('g');
	point.item.append("svg:line")
	.attr("y1", 0)
	.attr("x1", 0)
	.attr("style","stroke: rgb(51, 51, 51); stroke-width: 0.5; stroke-dasharray: 2, 2;");
	point.item
	.append("svg:circle")
	.attr("class", " height-focus circle-lower")
	.attr("r", 3);
	if (point.label) {
	point.item.append("svg:text")
	.attr("dx", "4px")
	.attr("dy", "-4px");
	}
	}
	point.item
	.datum({
	pos: point.position,
	x: x,
	y: y
	})
	.attr("class", d => "point " + d.pos)
	.attr("transform", d => "translate(" + d.x + "," + d.y + ")");
	point.item.select('line')
	.datum({
	y2: ({'top': -y, 'bottom': height - y})[point.position],
	x2: ({'left': -x, 'right': width - x})[point.position] || 0
	})
	.attr("y2", d => d.y2)
	.attr("x2", d => d.x2)
	if (point.label) {
	point.item.select('text')
	.text(point.label);
	}
	return g;
	}
	};

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 #211 (comment)

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