Добавление auto bru sh к графику шкалы времени d3

Question

Я работаю над графиком временной шкалы d3 - но под нагрузкой - я хочу, чтобы bru sh автоматически развертывался - с возможностью точной настройки на определенный набор дат входа / выхода

https://jsfiddle.net/nu1z4d3r/

https://jsfiddle.net/2y8gkas3/8/ - последний пример -

Я имею попытался добавить - нарисовать bru sh logi c в нижней части базы кода https://bl.ocks.org/micahstubbs/3cda05ca68cba260cb81

• какие правильные значения нужно сделать эта работа - должна ли xTop быть x2?

  функция drawBru sh (a, b) {// определить наш bru sh экстент

    // 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

С bru sh - было несколько модификаций, которые мне пришлось сделать

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

, где называется bru sh - мы добавляем переменную к артефакту. Мы делаем второй вызов с помощью "bru sh .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 (bru sh .move ... и в основе добавить "drawBru sh (timeBegin, timeEnd);"