d3fc webgl烛台. webgl中的设置fillStyle

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不会起任何作用。

我看到另一个堆叠溢出的答案建议：

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

但是Webgl上下文中似乎没有setClearColor函数(尽管我确实看到了clear())

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

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);
    });

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

下面是原始答案。

不幸的是，目前WebGL系列的d3fc并不容易做到这一点，但我们确实希望变化很快能做到这一点。

就目前情况而言，这需要深入研究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);
    });

会产生以下情况-

​

​