javascript - 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)");;

我还是不太明白这一点(而且代码感觉一般般)。但它有效。