d3fc - d3fc webgl 烛台 - 在 webgl 中设置 fillStyle equivelant

Question

我正在使用 d3fc+canvas 将烛台渲染到图表并根据它是向上还是向下蜡烛来更改其填充颜色。系列发生器看起来像这样

const generator = fc.seriesCanvasCandlestick()
        .crossValue(d => d.date)
        .openValue(d => d.open)
        .highValue(d => d.high)
        .lowValue(d => d.low)
        .closeValue(d => d.close)
        .decorate((context, datum, index) => {

            context.fillStyle = datum.close > datum.open ? 'blue' : 'red'
        });

我现在正在尝试将其转换为 webGl 渲染（使用seriesWebglCandlestick），但我不知道如何以相同的方式设置填充颜色。

如何转换我的装饰函数来为 webgl 烛台着色？

似乎我可以使用 context.context() 获取 Webgl 上下文，但在其上设置 fillStyle 并没有做任何事情。

我看到另一个stackoverflow答案建议：

renderer.setClearColor(0xcc3dca, 0.7)
renderer.clear()

setClearColor但是在 Webgl 上下文中似乎没有任何功能（尽管我确实看到了clear()）

我也确实看到clearColor()了哪个需要 4 个参数，所以我尝试传递 rgba 值，clearColor(197,197,197,0.7)但也没有效果。

标签： d3fc

Answer 1

现在这个功能已经发布了，代码应该是这样的——

const fillColor = fc
    .webglFillColor()
    .data(data)
    .value(d => 
         d.close > d.open ? 
             [0, 0, 1, 1] : [1, 0, 0, 1]
    );

const series = fc
    .seriesWebglCandlestick()
    .xScale(xScale)
    .yScale(yScale)
    .context(gl)
    .crossValue((_, i) => i)
    .highValue(d => d.high)
    .lowValue(d => d.low)
    .openValue(d => d.open)
    .closeValue(d => d.close)
    .decorate(program => {
        fillColor(program);
    });

NB webglFillColor 如果没有填充，例如 ohlc 将无效。在这种情况下，您需要使用 webglStrokeColor 。

下面的原始答案。

---

不幸的是，目前这对于 d3fc 中的 WebGL 系列来说并不容易，但我们确实希望这种情况很快就会改变。

就目前而言，这需要深入研究 d3fc-webgl 包的内部结构。我们目前不建议这样做（直到上述问题得到解决），因为组件的命名和确切功能可能会发生变化。

但是，如果您非常热衷于尝试这里是当前版本所需的代码 -

elementConstantAttributeBuilder仅当您构建自己的库版本以从中导出时，此代码才会运行packages/d3fc-webgl/index.js

const fillColorAttribute = fc
    .elementConstantAttributeBuilder()
    .size(4)
    .data(data)
    .value((data, element) => 
         data[element].close > data[element].open ? 
             [0, 0, 1, 1] : [1, 0, 0, 1]
    );

const series = fc
    .seriesWebglCandlestick()
    .xScale(xScale)
    .yScale(yScale)
    .context(gl)
    .crossValue((_, i) => i)
    .highValue(d => d.high)
    .lowValue(d => d.low)
    .openValue(d => d.open)
    .closeValue(d => d.close)
    .decorate(program => {
        program
            .vertexShader()
            .appendHeader('attribute vec4 aFillColor;')
            .appendHeader('varying vec4 vFillColor;')
            .appendBody('vFillColor = aFillColor;');
        program
            .fragmentShader()
            .appendHeader('varying vec4 vFillColor;')
            .appendBody('gl_FragColor = vFillColor;');
        program
            .buffers()
            .attribute('aFillColor', fillColorAttribute);
    });

这产生以下 -