D3更新畫筆的比例不更新畫筆

Question

我想要創建的是D3版本3.5.6中的可縮放，可刷新的時間軸。 目前我沒有使用D3的縮放行為，只有兩個縮放按鈕。 我的問題如下：當單擊一個按鈕時，我更新比例並重新繪制軸和畫筆。 由於某種原因，畫筆不會更新范圍矩形和手柄，而只更新背景。 我知道我實際上並沒有更新畫筆的.extent() 。 但是，當規模改變時，刷子是否應該更新？

這是代碼的相關部分。 其余的可以在這個小提琴中找到。

document.getElementById('in').addEventListener('click', zoom.bind(null, .1));
document.getElementById('out').addEventListener('click', zoom.bind(null, -.1));

function zoom(step) {
  var offset;

  zoomScale += step;

  if(zoomScale < 1)
    zoomScale -= step;

  offset = (zoomScale * width - width) / 2;

  // updating the scale
  xScale
    .range([-offset, width + offset]);

  // redrawing the brush which doesn't seem to have effect I expected
  brushGroup
    .call(brush);

  // redrawing the axis which works fine
  xAxisGroup
    .transition()
    .call(xAxis);      
}

非常感謝！

Answer 1

顯然，您需要重置畫筆的范圍，因此重置內部xExtent和yExtent變量。 對我來說似乎是一個錯誤。

brush.extent(brush.extent());

https://jsfiddle.net/azksfjjw/6/

Answer 2

我在縮放功能中發現了您將xScale范圍定義為的問題

 xScale
    .range([-offset, width + offset]); 

在此之后你需要在這里傳遞它

brush = d3.svg.brush()
          .x(xScale) // This need new Values 
          .extent([.1, .6]),

比之后你可以打電話來重新畫出時間線

 brushGroup
        .call(brush);

這里的小提琴https://jsfiddle.net/azksfjjw/4/

Answer 3

我有同樣的問題，並通過刪除畫筆組並再次調用它來修復它。

圖表調整大小之前：

var brush = d3.brushX().extent([[0, 0], [graph_dim.w, graph_dim.h]]).on("end", brushended);
graphContent.append("g").attr("class", "brush").call(brush);

圖表調整大小后：

// update graph height 
graph_dim.h = my_new_graph_height;

// update brush extent
brush.extent([[0, 0], [graph_dim.w, graph_dim.h]]);
graphDIV.select(".brush").remove();
graphContent.append("g").attr("class", "brush").call(brush);

可能不是最好的方式，但它的工作原理:-)

請注意，如果您在同一圖表上有鼠標事件，它們將無法再訪問（畫筆將“覆蓋”它們） - 請參閱此答案 。