为d3时间线图表添加自动刷

Question

我正在制作 d3 时间线图表——但在加载时——我希望自动部署画笔——在一组特定的 in/out 日期上选择 fine-tuning

https://jsfiddle.net/2y8gkas3/8/ -- 最新例子 --

我试过将 --draw brush 逻辑添加到代码库的底部 https://bl.ocks.org/micahstubbs/3cda05ca68cba260cb81

完成这项工作的正确值是什么——xTop 应该是 x2 吗？

function drawBrush(a, b) { // 定义画笔范围

  // define our brush extent

  // note that x0 and x1 refer to the lower and upper bound of the brush extent
  // while x2 refers to the scale for the second x-axis, for the context or brush area.
  // unfortunate variable naming :-/
  var x0 = xTop.invert(a*w)
  var x1 = xTop.invert(b*w)
  console.log("x0", x0)
  console.log("x1", x1)
  brush.extent([x0, x1])

  // now draw the brush to match our extent
  // use transition to slow it down so we can see what is happening
  // set transition duration to 0 to draw right away
  //brush(d3.select(".brush").transition().duration(500));

  // now fire the brushstart, brushmove, and brushend events
  // set transition the delay and duration to 0 to draw right away
  //brush.event(d3.select(".brush").transition().delay(1000).duration(500));

}

    // call drawBrush once on load with the default value
//var zoomA = d3.select("input#a")[0][0].value;
//var zoomB = d3.select("input#b")[0][0].value;

var zoomA = 0;
var zoomB = -1;
drawBrush(zoomA, zoomB);

    /*
// update the extent and call drawBrush again
window.setTimeout(function() {
  d3.select("input#a")[0][0].value = .2;
  d3.select("input#b")[0][0].value = .7;
  var zoomA = d3.select("input#a")[0][0].value;
  var zoomB = d3.select("input#b")[0][0].value; 
  drawBrush(zoomA, zoomB) 
}, 2500); 
*/

Answer 1

使用画笔 -- 我必须进行一些修改

https://jsfiddle.net/m6ueL79o/3/

在调用画笔的地方——我们将一个变量附加到人工制品。我们用 "brush.move, x1.range()" 进行第二次调用——这会加载洗涤器

  var brush = d3.brushX()
  .extent([[0, 0], [w, miniHeight]])
  .on("brush", brushed);

  var gBrush = mini.append("g")
    .attr("class", "x brush")
    .call(brush)  
    .call(brush.move, x1.range());

否则——首先只加载图表——没有.call(brush.move...并在底部添加"drawBrush(timeBegin, timeEnd);"

为d3时间线图表添加自动刷

Adding an auto brush to the d3 timeline chart

javascript

d3.js

brush