D3是否在同一折線圖上支持多個畫筆？

Question

我想在同一折線圖上創建2個畫筆來選擇2個不同的日期範圍進行比較。

brush1：stDate，edDate brush2：stDate1，edDate1

我只看到一個刷。我如何獲得另一個畫筆的範圍。 D3是否在同一折線圖上支持多個畫筆？我想看到這兩個刷程度上同一線圖可能與不同的色彩模式

var data=[{"Date":"20060215","ExamCount":1393}, 
    {"Date":"20060216","ExamCount":4159}, 
    {"Date":"20060217","ExamCount":0620}, 
    {"Date":"20060220","ExamCount":7191}, 
    {"Date":"20060221","ExamCount":798}, 
    {"Date":"20060223","ExamCount":5678},  
    {"Date":"20060224","ExamCount":3511}, 
    {"Date":"20060227","ExamCount":5978}, 
    {"Date":"20060228","ExamCount":3510}, 
    {"Date":"20060302","ExamCount":5711}, 
    {"Date":"20060303","ExamCount":5715}, 
    {"Date":"20060304","ExamCount":6671}, 
    {"Date":"20060306","ExamCount":5714}, 
    {"Date":"20060307","ExamCount":9333},  
    {"Date":"20060308","ExamCount":2312}]; 
    var now = new Date(); 
    ts_start = '20060215'; 
    ts_end = '20060225'; 

    ts_start1 = '20060304'; 
    ts_end1 = '20060308'; 
    var margin = {top: 10, right: 10, bottom: 100, left: 40}, 
    width = 1160 - margin.left - margin.right, 
    height = 220 - margin.top - margin.bottom; 
    //width = 950, height = 90; 
    var x = d3.time.scale().range([0, width]), 
     y = d3.scale.linear().range([height, 0]); 

    var parseDate = d3.time.format("%Y%m%d").parse; 

    ts_start=parseDate(ts_start); 
    ts_end=parseDate(ts_end); 
    ts_start1=parseDate(ts_start1); 
    ts_end1=parseDate(ts_end1); 

    //Data Population 
    var xAxis = d3.svg.axis().scale(x).orient("bottom"), 
     yAxis = d3.svg.axis().scale(y).orient("left"); 

    brush = d3.svg.brush() 
      .x(x) 
      //.on("brushend", brushended); 
    brush1 = d3.svg.brush() 
      .x(x) 
      //.on("brushend", brushended); 



//$.getJSON(uri, function (data){ 
    var area = d3.svg.area() 
     .interpolate("monotone") 
     .x(function(d) { return x(d.Date); }) 
     .y0(height) 
     .y1(function(d) { return y(d.ExamCount); }); 

    var svg = d3.select("#timeslider").append("svg") 
     .attr("width", width + margin.left + margin.right) 
     .attr("height", height + margin.top + margin.bottom) 
     .append("g") 
     .attr("transform", "translate(10,0)"); 


    svg.append("defs").append("clipPath") 
     .attr("id", "clip") 
     .append("rect") 
     .attr("width", width) 
     .attr("height", height); 

    data.forEach(function(d) { 
     d.Date = parseDate(d.Date); 
     d.ExamCount = + d.ExamCount; 
    }); 

    x.domain(d3.extent(data.map(function(d) { return d.Date; }))); 
    y.domain([0, d3.max(data.map(function(d) { return d.ExamCount; }))]); 

    svg.append("path") 
     .datum(data) 
     .attr("clip-path", "url(#clip)") 
     .attr("d", area); 

    svg.append("g") 
     .attr("class", "x brush") 
     .call(brush.extent([ts_start,ts_end])) 
     .call(brush1.extent([ts_start1,ts_end1])) 
     .selectAll("rect") 
      .attr("height",height) 
      .style({ 
       "fill": "#69f", 
       "fill-opacity": "0.1" 
      }); 

我只能看到最後刷，但以前刷的程度似乎並沒有出現。我在這裏錯過了什麼嗎？

Answer 1

D3不限制您可以擁有的筆刷數量。有兩件事要記住：

• 你附加畫筆的元素應該是分開的，不能重疊。如果它們重疊，則一個刷子將接收來自另一個的事件;也就是說，你將無法實際使用這兩種筆刷。
• 處理函數需要不同。也就是說，來自一個畫筆的事件不應該影響另一個畫筆。

這是一個example，它使用幾個畫筆，應該給你一個想法如何在你自己的代碼中做到這一點。