I would like to use

axis = d3.axisLeft(scale)

in a Shape ponent

<Shape d = {axis()} />

It is mon for shape ponents in d3-shape to return a path if the rendering context is not set, which is the case in React-Native

It is possible to somehow gain acess on the react node context ? The path is not a viable option, since the axis will be a group of items, not a path

I would like to use

axis = d3.axisLeft(scale)

in a Shape ponent

<Shape d = {axis()} />

It is mon for shape ponents in d3-shape to return a path if the rendering context is not set, which is the case in React-Native

It is possible to somehow gain acess on the react node context ? The path is not a viable option, since the axis will be a group of items, not a path

• javascript
• react-native
• d3.js

Share Improve this question Follow asked Jun 13, 2018 at 8:50 Alex HuiculescuAlex Huiculescu 13922 silver badges1212 bronze badges 5

• Looking at the source code of d3-axis, it looks like there is no way to achive what I want and need to draw them myself without d3-axis – Alex Huiculescu Commented Jun 13, 2018 at 8:56
• I have same problem. Have you solved it? – ggtmtmgg Commented Jun 19, 2018 at 2:45
• @ggtmtmgg Axis is posed from multiple items, it's not just a simple svg. The structure resulting is formed from div, texts and svg and is built via DOM methods. Since React-Native does not have those ponents and methods, you can't render the axis. In fact, on React Native, d3 is only able to convert some svg, which is weak. But I started using github./wuxudong/react-native-charts-wrapper and it worked indeed – Alex Huiculescu Commented Jun 20, 2018 at 6:41
• also have the same problem – Varun Singh Commented Aug 23, 2018 at 14:10
• 2 @VarunSingh look at my upper ment, as this is impossible due to axis's implementation – Alex Huiculescu Commented Aug 24, 2018 at 13:05

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8 +50

I have been looking into this - my understanding is that it is not possible to use d3-axis and react-native ART Shapes together.

You can use d3-shape with ART Shapes because d3-shape functions return strings that are interpreted by ART Shape. Theses strings are explained well here https://css-tricks./svg-path-syntax-illustrated-guide/

So what I have been doing is using that css-tricks article as a reference, and d3-scale, to draw the lines.

This is the basic approach.

1) get an array of data points which you want ticks for.

2) use your d3-scale function from your graph to convert your array of datapoints to there location on the 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) then you need to use string interpolation and a loop to create the d-string (see the css-tricks article) like this:

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) put this line into your shape like this

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

That is how I have been doing it.

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