Поддерживает ли 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, который использует несколько кистей, которые должны дать вам представление о том, как это сделать в вашем собственном коде.