在d3js折线图中绘制线外轴

Question

我一直在尝试使用教程here在d3.js中创建动态折线图。我几乎让它工作，但有一个小问题。当我使用视口选择日期间隔并重新绘制图表时，它也会在轴外绘制线条。请参见下图左侧。

通常情况下，我画线如下：

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。

Answer 1

显然，我需要将这行代码添加到redrawChart函数：

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