onSegmentClick(callback) - callback isn't passed a segment object

[jerrytbuilt]

Using the data set provided with the 'categorical' example.

Code:

TimelinesChart()(document.body)
    .zScaleLabel('My Scale Units')
    .zQualitative(true)
    .onSegmentClick(segClicker)
    .data(myData);

function segClicker(segment) {
    console.log(segment);
}

...displays a 'MouseEvent' object in the console, not a 'segment' one

[adrienSola]

I was wondering about the same question. However, it seems you can access the segment with the following line :

segment.target.__data__

From there, you can access the labels and the values

Where segment is your MouseEvent. I was able to modify the value of the segment and every parameters of this segment.

Hope it can help you, I'm still trying to fully understand how everything is working.

[jerrytbuilt]

Ah yes, thanks for that insight!

My work around for the issue was to use segmentTooltipContent() (mouseover event handler) to grab the segment as a global variable so it was set before the click event

[ghost]

Hello, I am interested in this topic. I would like to use tooltip or selected segment data to work with them on an external function. So, anyone can put a working example to do it? I tried the adrienSola and jerrytbuilt solutions, but I must be doing something wrong because do not work for me.

[ghost]

Finally I was able to get the tooltip data, looking for the class name of the element. From here, it is only a matter of extracting the specific values from the HTML string. This is my work around:

              TimelinesChart()(document.getElementById("chartdiv"))
		.width(document.getElementById("chart-container").offsetWidth)
		.timeFormat('%d-%m-%Y %-H:%M:%S')
		.zScaleLabel('Consumo')
		.zQualitative(false)
		.onSegmentClick(procesa)
		.zColorScale(d3.scaleLinear().domain([0,midpot,maxpot]).range(['green','orange','red']))
		.data(myData);

		function procesa() {
			var x = document.getElementsByClassName("chart-tooltip segment-tooltip");
			var datos = x[0].innerHTML;
			window.alert(datos);
		}