d3fc画布-旋转d3元件

Question

我正在使用d3fc和画布渲染，我可以成功地渲染三角形，如下所示：

import { symbolTriangle } from 'd3-shape';
import { seriesCanvasPoint } from '@d3fc/d3fc-series'; 

seriesCanvasPoint()
    .crossValue(d => d.date)
    .mainValue(d => d.extremePrice)
    .type(symbolTriangle)
    .decorate((context, datum, index) => {
        const symbolColor = datum.peak ? 'red' :
                            datum.trough ? 'blue' : 'white';

        context.fillStyle = symbolColor;

    });

然而，我想将一些三角形旋转成上下颠倒的(在装饰函数中)：

        if (datum.peak) {
            context.rotate(Math.PI); //Pi radians = 180 deg
        }

但这没有任何作用。为什么？

Answer 1

这看起来非常像是canvas point系列实现中的一个bug。如果您查看源代码，就会执行路径指令：

https://github.com/d3fc/d3fc/blob/master/packages/d3fc-series/src/canvas/point.js#L23

然后，调用decorate：

https://github.com/d3fc/d3fc/blob/master/packages/d3fc-series/src/canvas/point.js#L28

因此，decorate可以修改填充和笔触，但不能以任何方式修改绘图函数。这应该是一个简单的修复方法。