0

Hi have an app with some graphs and I use a callback function to get the clicked point. I want to highlight it but I don't find any solution who work, and the documentation of this plugin is inexistant.

Here is the options for my graph :

   scope.options = {
            chart: {
                type: 'lineChart',
                height: 450,
                margin : {
                    top: 20,
                    right: 20,
                    bottom: 40,
                    left: 55
                },
                /* A utiliser que quand il y aura qu'une courbe (bloque les event apparement) */
                useInteractiveGuideline: false,

                dispatch: {
                    stateChange: function(){ console.log("stateChange"); },
                    changeState: function(){ console.log("changeState"); },
                    tooltipShow: function(){ console.log("tooltipShow"); },
                    tooltipHide: function(){ console.log("tooltipHide"); },

                },
                xAxis: {
                    axisLabel: 'Temperature (Celcius)'
                },
                yAxis: {
                    axisLabel: 'Fluorescence',
                    tickFormat: function(d){
                        return d3.format('0f')(d);
                    },
                    axisLabelDistance: -10
                },

                callback: function(chart){
                    console.log("!!! lineChart callback !!!");
                    console.log(chart);

                    chart.lines.dispatch.on("elementClick", function(e) {
                        /* Get the clicked point */
                        console.log(e);
                        chart.lines.clearHighlights();

                        // ---> I try these two solutions

                        //chart.lines.highlightPoint(0,parseInt(e.pointIndex),true);

                        /*d3.select('.nv-groups')
                            .selectAll("circle.myPoint")
                            .enter().append("circle").attr("class", "myPoint")
                            .attr("cx", function(d) { return chart.xAxis.scale()(d.x); })
                            .attr("cy", function(d) { return chart.yAxis.scale()(d.y); })
                            .attr("r", 5);*/
                    });
                },
            },
            title: {
                enable: true,
                text: 'Title for Line Chart'
            },


        };

Anyone have an idea ?

Edit : I also try these methods but the first one says my element is undefined but it's not... the second one say that enter is not a function.

/* Cannot use setAttribute on undefined element ---> Pourtant il n'est pas undefined ...
                         document.getElementById(e.element.id).setAttribute("class", "myPoint")
                            .setAttribute("cx", function(d) { return chart.xAxis.scale()(d.x); })
                            .setAttribute("cy", function(d) { return chart.yAxis.scale()(d.y); })
                            .setAttribute("r", 5);
                            */


                       /*  --> viens de la doc : ne fonctionne pas non plus  ----> enter is not a function
                        d3.select('.nv-groups')
                            .selectAll("circle.myPoint")
                            .remove();

                        var points = d3.select('.nv-groups')
                            .selectAll("circle.myPoint")

                        points.enter().append("circle")
                            .attr("class", "myPoint")
                            .attr("cx", function(d) { return chart.xAxis.scale()(d.x); })
                            .attr("cy", function(d) { return chart.yAxis.scale()(d.y); })
                            .attr("r", 5);


                        */
Spialdor
  • 1,475
  • 5
  • 20
  • 46

0 Answers0