AngularJS nvd3图表-突出显示一个点

Question

您好，我有一个带有一些图形的应用程序，我使用了回调函数来获取点击点。我想突出显示它，但找不到任何有效的解决方案，并且此插件的文档不存在。

以下是我的图表的选项：

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


        };

有人知道吗？

编辑：我也尝试了这些方法，但是第一个方法说我的元素是未定义的，但是不是。第二个方法说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);


                        */