我想在我的 nvd3 图表中添加一条简单的红线

Question

我做了一个 nvd3 图表。我有个问题。我想沿着 y 轴画一条简单的红线。示例：x:i y:180。但我不想把它当作数据来对待，而不是有价值。所以作为一条简单的线。

源码：

  vm.fhrOptions = {
            chart: {
                type: 'lineChart',
                useInteractiveGuideline: true,
                height: 300,
                forceY:([60,200]),

                lineY:([120,180]),
                fitScreen: true,
                margin : {

                    left:70,
                    bottom:0

                },
                transitionDuration: 1000,
                xAxis: xAxisOptions,
                yAxis: {
                    axisLabelDistance:50,


                            lines: {value: 120},


                    color : { pattern:['#1f77b4', '#aec7e8']},
                    axisLabel: 'FHR [pulzus/perc]',
                    tickFormat: function(d){
                        return d===null?'NaN':d3.format('d')(d);
                    },
                    rotateYLabel: -45,
                    showMaxMin: false,
                    domain:([80, 160]),
                    showLegend:true
                }

            }
        };

Answer 1

使用以下内容在图表上画一条线，根据需要更改参数并将“#chart svg”更改为您的选择器名称。

                        d3.select('#chart svg')
                        .append('line')
                        .attr({
                        x1: 500 + chart.xAxis.scale()(0),
                        y1: 35 + chart.yAxis.scale()(10),
                        x2: 57 + chart.xAxis.scale()(3),
                        y2: 35 + chart.yAxis.scale()(10)
                        })
                        .style("stroke", "#FF0000")
                        .style("fill", "#ff0000");