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);
        }