以反应原生方式绘制d3轴

Question

我想用

axis = d3.axisLeft(scale)

在一个Shape组件中

<Shape d = {axis()} />

如果未设置渲染上下文,则d3-shape中的形状组件通常会返回路径,这在React-Native中就是这种情况

有可能以某种方式获得反应节点上下文的访问权限吗？路径不是可行的选项,因为轴将是一组项目,而不是路径

Answer 1

我一直在研究-我的理解是不可能同时使用d3轴和本机反应ART形状。

可以将d3-shape与ART Shapes一起使用，因为d3-shape函数返回由ART Shape解释的字符串。这些字符串在这里很好地解释了https://css-tricks.com/svg-path-syntax-illustrated-guide/

因此，我一直在使用该css-tricks文章作为参考，并使用d3比例画线。

这是基本方法。

1）获得您想要滴答的数据点数组。

2）使用图形中的d3-scale函数将数据点数组转换为Surface上的该位置

scalePoints = () => {
    var { xScale, dataPoints } = this.props;
    this.points = [];
    for (var i = 0; i <= dataPoints.length - 1; i++) {
        this.points.push(xScale(dataPoints[i]));
    }
};

3）然后，您需要使用字符串插值和循环来创建d字符串（请参见css-tricks文章），如下所示：

getPath = () => {
    var { curveOffsetTop, outerTick, innerTick } = this.props;
    var path = `M0,${curveOffsetTop}`;
    for (var i = 0; i <= this.points.length - 1; i++) {
        path = path + `H${this.points[i]}`;
        path = path + `v${outerTick}`;
        path = path + `v-${outerTick}`;
        path = path + `v-${innerTick}`;
        path = path + `v${innerTick}`;
    }
    return { path: path };
};

4）像这样把这条线变成你的形状

<Shape
    {...other}
    d={this.getPath().path}
    stroke="#000"
/>

这就是我一直在做的事情。

https://github.com/goughjo02/React-Native-Animations-with-PanResponder/blob/master/components/linechart/xAxis.js