Нарисуйте ось d3 в react-native
Я бы хотел использовать
axis = d3.axisLeft(scale)
в компоненте формы
<Shape d = {axis()} />
Компоненты формы в d3-shape обычно возвращают путь, если контекст рендеринга не задан, что имеет место в React-Native.
Можно ли каким-то образом получить доступ к контексту узла реакции? Путь не является приемлемым вариантом, поскольку ось будет представлять собой группу элементов, а не путь.
У меня такая же проблема. Вы решили это?
@ggtmtmgg Axis состоит из нескольких элементов, это не просто svg. Результирующая структура формируется из div, текстов и svg и строится с помощью методов DOM. Поскольку React-Native не имеет этих компонентов и методов, вы не можете визуализировать ось. Фактически, в React Native d3 может конвертировать только некоторые svg, что является слабым. Но я начал использовать github.com/wuxudong/react-native-charts-wrapper, и он действительно работал
тоже есть такая же проблема
@VarunSingh посмотрите мой верхний комментарий, так как это невозможно из-за реализации оси
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я изучал это - я понимаю, что невозможно использовать d3-axis и react-native ART Shapes вместе.
Вы можете использовать d3-shape с ART Shapes, потому что функции d3-shape возвращают строки, которые интерпретируются ART Shape. Эти строки хорошо объяснены здесь https://css-tricks.com/svg-path-syntax-illustrated-guide/
Я использовал эту статью css-tricks в качестве справочника и шкалу d3 для рисования линий.
Это основной подход.
1) получить массив точек данных, для которых нужны отметки.
2) используйте функцию масштабирования d3 из вашего графика, чтобы преобразовать массив точек данных в место на поверхности.
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"
/>
Вот как я это делал.
Глядя на исходный код оси d3, похоже, что нет способа достичь того, что я хочу, и мне нужно нарисовать их самостоятельно без оси d3.