2014-09-04 100 views
1

在我的第一個d3 js圖表中嘗試畫筆功能,並讓畫筆按預期工作。只有問題我有atm圖表線溢出x軸的界限。當選擇整個期間時,線條保持其邊界。我做錯了什麼,但不能真正看到什麼。有人得到一個指針?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); 
} 

回答

2

好吧,想我找到了一個解決方案,看起來很確定。這是我錯誤的剪輯路徑部分。當我添加此代碼時,它看起來更好:

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

我還是不太明白這一點(代碼感覺馬馬虎虎)。但它的工作。