D3js d3-brush輔助工具

用途

d3-brush用來選取一維或二維的區塊，可能是放大zoom或是過濾該區間的值，讓使用者方便檢閱區間的資料。

d3.brush

範例：

...上半部僅為劃出圖表省略

let brushLayer = rootLayer.append("g")
                .attr("class", "brush")
                .call(d3.brush().on("brush", brushed));

function brushed(event) {
  console.log('event', event)
}

brushed事件為選取的一些數值，像是選區區域是x, y的位置範圍等等...

d3.brushX

範例:

let brushLayer = rootLayer.append("g")
                .attr("class", "brush")
                .call(d3.brushX().on("brush", brushed));

function brushed(event) {
  console.log('event', event)
}

其實也只是brush改成brushX。
但如過再搭配一張圖，其實可以做成這類型的圖。

d3.brushY

範例:

let brushLayer = rootLayer.append("g")
                .attr("class", "brush")
                .call(d3.brushY().on("brush", brushed));

function brushed(event) {
  console.log('event', event)
}

其實也只是brush改成brushY。

結論

這個API感覺有點雞肋，但其實就是常見的小工具會出現的。

範例Codepen

參考

d3-brush