Как заставить серии webglcandlestick соблюдать функцию пропускной способности?

Question

Я следую этому примеру из репозитория d3f c github: https://github.com/d3fc/d3fc/blob/master/examples/series-webgl-candlestick/index.js

Насколько я понимаю, пропускная способность по умолчанию составляет 5 пикселей, а приведенный выше пример не является перегрузочным эта настройка.

Если я изменю соответствующую часть кода выше на:

const series = fc
    .seriesWebglCandlestick()
    .bandwidth(100)
    .xScale(xScale)
    .yScale(yScale)
    .defined(() => true)
    .equals(d => d.length)
    ;

Это должно расставить свечи на 100px каждая. Вместо этого мой дисплей показывает изображение ниже:

Не похоже, что он расположен правильно.

Редактировать:

Следуя предложенному ниже предложению, я попытался изменить этот предоставленный Codepen (https://codepen.io/colineberhardt-the-bashful/pen/VwvzYmP?editors=1111), чтобы использовать свечи 100px, и на моем экране он по-прежнему отображается неправильно:

Answer 1

Я знаю, что ответ «это работает для меня» не идеален, однако этот простой пример показывает, что пропускная способность работает, как ожидалось ...

const data = fc.randomFinancial()(50);

const container = document.querySelector('canvas');
container.width= 300;
container.height= 300;

const xScale = d3
    .scaleTime()
    .range([0, 300])
    .domain(fc.extentDate().accessors([d => d.date])(data));

const yScale = d3
    .scaleLinear()
    .range([300, 0])
    .domain(fc.extentLinear().accessors([d => d.high])(data));

const series = fc
    .seriesWebglCandlestick()
    // .bandwidth(100)
    .xScale(xScale)
    .yScale(yScale)
    .context(container.getContext('webgl'));

series(data);

См. Следующий код: https://codepen.io/colineberhardt-the-bashful/pen/VwvzYmP?editors=1111

удаление комментария, который устанавливает полосу пропускания равным 100, заставляет каждую свечу иметь ширину 100 пикселей.