невозможно нарисовать горизонтальную опорную линию пузырьковой диаграммы nvd3

Есть две проблемы с вашим кодом.

1. Вам нужно установить stroke вашей линии. Попробуй это:

   d3.select('#chart svg')
     .append('line')
     .attr({ x1: x(0), y1: 10, x2: x(3), y2: 10 })
     .style("stroke", "#000");
   

   Это сделает черную линию в верхнем левом углу вашего JSFiddle. Однако вы хотите провести на графике линию, где y=10. Это подводит нас ко второму пункту.

2. Раньше вы пытались нарисовать линию в точке y1=y2=10, которая находится всего в 10 пикселях от верха вашего SVG. Кроме того, вы использовали собственную шкалу x. Вместо этого вам нужно использовать шкалы по осям x и y диаграммы, чтобы нарисовать линии в соответствующей точке диаграммы. NVD3 имеет шкалу каждой оси, доступную с помощью chart.axis.scale() (см. -plot-in-nvd3">это ТАК вопрос), поэтому вы можете сделать следующее:

   d3.select('#chart svg')
       .append('line')
       .attr({
           x1: 75 + chart.xAxis.scale()(0),
           y1: 30 + chart.yAxis.scale()(10),
           x2: 75 + chart.xAxis.scale()(3),
           y2: 30 + chart.yAxis.scale()(10)
       })
       .style("stroke", "#000");
   

   (Обратите внимание, что на диаграмме есть левое поле 75 пикселей и верхнее поле 30 пикселей, поэтому вам необходимо соответствующим образом настроить положение линии.) Если вы внесете эти изменения, вы получите изображение ниже. См. обновленный JSFiddle здесь.

Вы также можете убедиться, что ваша строка обновляется с изменением размера окна следующим образом:

nv.utils.windowResize(function(){
    chart.update();
    line.attr({
        x1: 75 + chart.xAxis.scale()(0),
        y1: 30 + chart.yAxis.scale()(10),
        x2: 75 + chart.xAxis.scale()(3),
        y2: 30 + chart.yAxis.scale()(10)
    })

});