Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Knell0714 opened this issue Sep 7, 2022 · 0 comments
Open
Labels
Milestone

Comments

@Knell0714
Copy link

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();`
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants