d3fc icon indicating copy to clipboard operation
d3fc copied to clipboard

When using WebGL to render Chart, calling Brush will report an error.

Open Knell0714 opened this issue 2 years ago • 0 comments

I am using D3 and D3FC for the first time, I use the official Brush Demo, and change the SVG part to WebGL, but the program will Uncaught TypeError: dataSeries.context is not a function when running! My requirement is to call Brush for Select and zoom during WebGL rendering. I want help! `const random = d3.randomNormal(0, 0.2); const sqrt3 = Math.sqrt(3); const points0 = d3 .range(300) .map(() => [random() + sqrt3, random() + 1, 0]); const points1 = d3 .range(300) .map(() => [random() - sqrt3, random() + 1, 1]); const points2 = d3.range(300).map(() => [random(), random() - 1, 2]); const data = d3.merge([points0, points1, points2]);

  const yExtent = fc
    .extentLinear()
    .accessors([(d) => d[1]])
    .pad([0.1, 0.1]);

  const xExtent = fc
    .extentLinear()
    .accessors([(d) => d[0]])
    .pad([0.1, 0.1]);

  const x = d3.scaleLinear().domain(xExtent(data));
  const y = d3.scaleLinear().domain(yExtent(data));
  const color = d3.scaleOrdinal(d3.schemeCategory10);

  const pointSeries = fc
    .seriesWebglPoint()
    .crossValue((d) => d[0])
    .mainValue((d) => d[1])
    .size(15);
  // .decorate((selection) => {
  //   selection.enter().style("fill", (d) => color(d[2]));
  // });

  let idleTimeout;
  const idleDelay = 350;

  const brush = fc.brush().on("end", (e) => {
    if (!e.selection) {
      if (!idleTimeout) {
        // detect double clicks
        idleTimeout = setTimeout(() => (idleTimeout = null), idleDelay);
      } else {
        x.domain(xExtent(data));
        y.domain(yExtent(data));
        render();
      }
    } else {
      x.domain(e.xDomain);
      y.domain(e.yDomain);
      render();
    }
  });

  const multi = fc
    .seriesWebglMulti()
    .series([pointSeries, brush])
    .mapping((data, index, series) => {
      switch (series[index]) {
        case pointSeries:
          return data;
        case brush:
          // the brush is transient, so always has null data
          return null;
      }
    });

  const mainChart = fc.chartCartesian(x, y).webglPlotArea(multi);

  function render() {
    d3.select("#scatter-global").datum(data).transition().call(mainChart);
  }

  render();`

Knell0714 avatar Sep 07 '22 10:09 Knell0714