在d3js折線圖中的軸外繪圖線

我一直在嘗試在d3.js中使用教程here創建一個動態折線圖。我幾乎可以工作，但有一個小問題。當我使用視口選擇日期間隔並重繪圖表時，它也會在軸外繪製線條。見下圖左側。在d3js折線圖中的軸外繪圖線

通常情況下，我得出如下一行：

var valueline = d3.svg.line() 
       .x(function (d) { 
        return xScale(d.timestamp); 
       }) 
       .y(function (d) { 
        return yScale(d.value); 
       }); 

plotChart.append("path") 
       .attr("class", "line") 
       .attr("id", "lineGraphId") 
       .attr("d", valueline(data));

而且我重畫圖表功能如下：

function redrawChart() { 
      plotChart.select("#lineGraphId").remove(); 
      plotChart.append("path") 
        .attr("class", "line") 
        .attr("id", "lineGraphId") 
        .attr("d", valueline(data)); 
      plotChart.select('.x.axis').call(xAxis); 
     }

我無法找到一個解決方案將外部的軸。我無法在jsfiddle中託管我的代碼，因爲我需要加載csv數據，但是您可以看到所有源代碼here。

來源

2016-12-05 nope

你的意思怎麼不畫線出y軸的？ – phoa

@phoa是的，應該有更好的措辭。 – nope

如果您按照教程..您可能會錯過將剪輯路徑應用於plotArea。尋找'clipPath' – phoa

很顯然，我需要這行代碼添加到redrawChart功能：

.attr('clip-path', 'url(#plotAreaClip)')

來源

2016-12-05 07:35:00 nope

在d3js折線圖中的軸外繪圖線

回答

相關問題