d3.js我有多個畫筆區域。重繪區域時如何取消其他區域的刷區域？-有解無憂

我有一個svg，這個 svg 中有很多g。

for (let j = 0; j < 3; j  ) {
    let rx = 400 * j, ry = 100, rw = 300, rh = 300;
    let g = svg.append("g")
        .attr("x", rx).attr("y", ry)
        .attr("width", rw).attr("height", rh);
}

我為每個g創建一個畫筆：

for (let j = 0; j < 3; j  ) {
    let rx = 400 * j, ry = 100, rw = 300, rh = 300;
    let g = svg.append("g")
        .attr("x", rx).attr("y", ry)
        .attr("width", rw).attr("height", rh);

    g.call(d3.brush()
        .extent([[rx,ry], [rx rw,ry rh]])
        .on("start brush", function (e){
            svg.selectAll("g").call(d3.brush().clear);
            let extent = e.selection;
            //do something
            })
    );
}

上面的代碼會導致錯誤，因為：
Uncaught RangeError: Maximum call stack size exceeded
我如何以其他方式執行此操作？\

let width = 2000;
let height = 1200;
let svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

for (let j = 0; j < 3; j  ) {
  let rx = 400 * j,
    ry = 100,
    rw = 300,
    rh = 300;
  let g = svg.append("g")
    .attr("x", rx).attr("y", ry)
    .attr("width", rw).attr("height", rh);

  g.append("rect")
    .attr("x", rx).attr("y", ry)
    .attr("width", rw).attr("height", rh)
    .attr("fill", "white")
    .attr("stroke", "black");

  g.call(d3.brush()
    .extent([
      [rx, ry],
      [rx   rw, ry   rh]
    ])
    .on("start brush", function(e) {
      svg.selectAll("g").call(d3.brush().clear);
      let extent = e.selection;
    })
  );
}

<script src="https://d3js.org/d3.v7.min.js" charset="utf-8"></script>

uj5u.com熱心網友回復：

brushandstart是兩個不同的事件，永遠不會有 abrush前面沒有 a start，所以你可以省略brush這里。這樣，代碼就不會不斷地觸發自身，從而避免了無限回圈遞回：

let width = 2000;
let height = 1200;
let svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

for (let j = 0; j < 3; j  ) {
  let rx = 400 * j,
    ry = 100,
    rw = 300,
    rh = 300;
  let g = svg.append("g")
    .attr("x", rx).attr("y", ry)
    .attr("width", rw).attr("height", rh);

  g.append("rect")
    .attr("x", rx).attr("y", ry)
    .attr("width", rw).attr("height", rh)
    .attr("fill", "white")
    .attr("stroke", "black");

  g.call(d3.brush()
    .extent([
      [rx, ry],
      [rx   rw, ry   rh]
    ])
    .on("start", function(e) {
      svg.selectAll("g").call(d3.brush().clear);
      let extent = e.selection;
    })
  );
}

<script src="https://d3js.org/d3.v7.min.js" charset="utf-8"></script>

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/376242.html

標籤：d3.js 刷子

上一篇：在SpringBootAPI中測驗時控制器上的NullPointerException-Mocking

下一篇：在兩個地方渲染一個d3圖表使它在第一個區域渲染兩次？