Диаграмма AngularJS nvd3 - выделить точку - PullRequest
Новая
       24

Диаграмма AngularJS nvd3 - выделить точку

0 голосов
/ 03 июля 2018

Привет, у меня есть приложение с графиками, и я использую функцию обратного вызова, чтобы получить точку щелчка. Я хочу выделить это, но я не нахожу никакого решения, которое работает, и документация этого плагина не существует.

Вот параметры для моего графика: 

   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'
            },


        };

У кого-нибудь есть идея?

Edit: я также пробую эти методы, но первый говорит, что мой элемент не определен, но это не так ... второй говорит, что enter не является функцией. 

/* 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);


                        */
...