D3 js-当使用画笔时，线条增长超过图表x轴

Question

在我的第一个d3-js图表中尝试画笔功能，并使画笔按预期工作。我有atm的唯一问题是图表线溢出了x轴的边界。当选择了整个周期时，直线保持其边界。我做错了什么，但真的看不出是什么。有人有指针吗？

下面的代码（选定）：

        var margin = {top: 40, right: 185, bottom: 100, left: 40},
            width = 960 - margin.left - margin.right,
            height = 500 - margin.top - margin.bottom;
        var margin2 = {top: 440, right: 185, bottom: 20, left: 40},
            height2 = 500 - margin2.top - margin2.bottom;
        var x=d3.time.scale().range([0, width]),
            x2 = d3.time.scale().range([0, width]);
        var y=d3.scale.linear().range([height,0]),
            y2= d3.scale.linear().range([height2,0]);
         var xAxis = d3.svg.axis().scale(x)
                            .orient("bottom")
                            .ticks(5);
         var xAxis2 = d3.svg.axis().scale(x2)
                            .orient("bottom")
                            .ticks(5);
         var yAxis = d3.svg.axis().scale(y)
                            .orient("left")
                            .ticks(5)
                            .tickFormat(formatPercent);
          var brush = d3.svg.brush()
                      .x(x2)
                      .on("brush", brushed);
function brushed() {
x.domain(brush.empty() ? x2.domain() : brush.extent());
focus.select("#mainline").attr("d", function (d) {return valueLine(dataFilter); });
focus.select("#subline").attr("d", function (d) {return valueLine(dataAHSantal); });
focus.select(".x.axis").call(xAxis);
}

Answer 1

好吧，我想我找到了一个看起来很好的解决方案。我错了剪辑路径部分。当我添加这个代码时，它看起来更好：

var clip = focus.append("defs").append("svg:clipPath")
    .attr("id", "clip")
    .append("svg:rect")
    .attr("id", "clip-rect")
    .attr("x", "0")
    .attr("y", "0")
    .attr("width", width)
    .attr("height", height);
focus.selectAll("path").data(nested).enter()
    .append("path")
    .attr("class", "line")
    .attr("id", "mainline")
    .attr("d", function (d) {return valueLine(dataFilter); })
    .attr("clip-path","url(#clip)");
focus.append("path")
    .data(dataAHSantal)
    .attr("class", "pathahs")
    .attr("id", "subline")
    .attr("d", function (d) {return valueLine(dataAHSantal); })
    .attr("clip-path","url(#clip)");;

我仍然不太理解这一点（代码感觉一般）。但它是有效的。