D3 js - 当使用画笔线超出图表 x 轴时答案

【问题标题】：D3 js - when using brush line grows beyond chart x-axisD3 js - 当使用画笔线超出图表 x 轴时
【发布时间】：2014-09-04 20:34:04
【问题描述】：

在我的第一个 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);
}

【问题讨论】：

标签： javascript d3.js linechart brush

【解决方案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)");;

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

【讨论】：