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，可以让您了解如何在自己的代码中执行此操作。

D3是否在同一折线图上支持多个画笔？

1 个答案: