javascript - 在 native react 中绘制 d3 轴

Question

我想用

axis = d3.axisLeft(scale)

在 Shape 组件中

<Shape d = {axis()} />

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

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

Answer 1

我一直在研究这个——我的理解是不可能一起使用 d3 轴和 react-native ART Shapes。

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

所以我一直在做的是使用那篇 css-tricks 文章作为引用，并使用 d3-scale 来画线。

这是基本方法。

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