D3 js - при использовании линии кисти растет за пределами оси графика x

Question

Пытаясь использовать кисть в моей первой диаграмме d3 js и получив кисть для работы по назначению. Единственная проблема, с которой я столкнулся, заключается в том, что линии диаграммы разливаются по границам оси 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)");; 

Я до сих пор не очень понимаю, это (и код чувствует себя так себе). Но это работает.