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

【问题标题】：Does D3 support multiple brushes on the same line chart?D3是否支持同一折线图上的多个画笔？
【发布时间】：2014-02-10 17:55:41
【问题描述】：

我想在同一个折线图上创建 2 个画笔来选择 2 个不同的日期范围进行比较。

brush1 :stDate,edDate 刷子2：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"
          });

我只看到最后一个刷子，但之前的刷子范围似乎没有出现。我在这里有什么遗漏吗？

【问题讨论】：

您可以拥有任意数量的画笔。为了能够使用它们，您必须确保它们不完全重叠。
我已经粘贴了我的代码。我只看到一个笔刷范围而前一个不可见？我错过了什么还是我必须以不同的方式做？
我在 jsFiddle 中的代码 jsfiddle.net/bxW9T/1
您确实需要将它们附加到不同的元素上——jsfiddle.net/bxW9T/3 尽管在此示例中它们完全重叠，但您只能使用其中一个。
谢谢我现在看到了 2 个画笔。我只能更改第二个画笔范围，但是当我更改第一个画笔时，它总是会与第二个画笔重叠。我需要获取 2 组日期并进行比较。 jsfiddle.net/bxW9T/5 – Shanthi

标签： d3.js

【解决方案1】：

D3 不限制您可以拥有的画笔数量。有两点要记住：

将画笔附加到的元素应该是分开的，而不是重叠的。如果它们重叠，一个画笔将从另一个画笔接收事件；也就是说，您将无法实际使用这两种画笔。
处理函数需要不同。也就是说，一个画笔的事件不应影响另一个画笔。

这是一个example，它使用了几个画笔，应该可以让您了解如何在自己的代码中进行操作。

【讨论】：