如何让webglcandlestick系列尊重带宽功能？

Question

我遵循了d3fc github存储库中的这个示例：https://github.com/d3fc/d3fc/blob/master/examples/series-webgl-candlestick/index.js

我的理解是默认带宽是5px，上面的例子没有覆盖这个设置。

如果我将上述代码的相关部分更改为：

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的candles，但在我的屏幕上它仍然显示不正确：

​

​

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的注释将导致每个烛台的宽度为100px。