React native 将文本标签添加到圆弧形状

我正在使用

d3 shape

库在

React Native

中构建饼图。这是我的代码：

Slice.js

import React, { Component } from 'react';
import { Path, } from 'react-native-svg';
import * as shape from 'd3-shape';
const d3 = { shape };

export default class Slice extends Component {
    constructor(props) {
        super(props);
        this.arcGenerator = d3.shape.arc()
            .outerRadius(100)
            .padAngle(0)
            .innerRadius(0);
    }

    createPieSlice = (index, endAngle, data) => {

        const arcs = d3.shape.pie()
            .value((item) => item.number)
            .startAngle(0)
            .endAngle(endAngle)
            .centroid()
            (data);

        let arcData = arcs[index];

        return this.arcGenerator(arcData);
    };

    render() {

        const {
            endAngle,
            color,
            index,
            data,
            onPress
        } = this.props;

        return (
            <Path
                onPress={onPress}
                d={this.createPieSlice(index, endAngle, data)}
                fill={color}
            />
        )

    }
}

import React, { Component } from 'react';
import Svg from 'react-native-svg';
import {
  StyleSheet,
  View,
} from 'react-native';
import Slice from "./Slice";

const demoData = [
  {
    number: 150,
    color: '#28BD8B'
  },
  {
    number: 110,
    color: '#366A6A'
  },
  {
    number: 60,
    color: '#1d2f51'
  },
  {
    number: 40,
    color: '#466B6A'
  },
];


export default class App extends Component {

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <View style={styles.container}>
          <Svg
            width={200}
            style={{
              shadowOffset: {
                width: 0,
                height: 32
              },
              elevation: 12,
              shadowRadius: 12.5,
              shadowOpacity: 1,
            }}
            height={200}
            viewBox={`-100 -100 200 200`}
          >
            {
              demoData.map((item, index) =>
                <Slice
                  index={index}
                  endAngle={Math.PI * 2}
                  color={item.color}
                  data={demoData}
                  key={'pie_shape_' + index}
                />
              )
            }
          </Svg>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

但这在

React Native

中不起作用，它说：

append不是一个函数

有关更多信息，请参阅我的App.js

import React, { Component } from 'react';
import { Path, } from 'react-native-svg';
import * as shape from 'd3-shape';
const d3 = { shape };

export default class Slice extends Component {
    constructor(props) {
        super(props);
        this.arcGenerator = d3.shape.arc()
            .outerRadius(100)
            .padAngle(0)
            .innerRadius(0);
    }

    createPieSlice = (index, endAngle, data) => {

        const arcs = d3.shape.pie()
            .value((item) => item.number)
            .startAngle(0)
            .endAngle(endAngle)
            .centroid()
            (data);

        let arcData = arcs[index];

        return this.arcGenerator(arcData);
    };

    render() {

        const {
            endAngle,
            color,
            index,
            data,
            onPress
        } = this.props;

        return (
            <Path
                onPress={onPress}
                d={this.createPieSlice(index, endAngle, data)}
                fill={color}
            />
        )

    }
}

import React, { Component } from 'react';
import Svg from 'react-native-svg';
import {
  StyleSheet,
  View,
} from 'react-native';
import Slice from "./Slice";

const demoData = [
  {
    number: 150,
    color: '#28BD8B'
  },
  {
    number: 110,
    color: '#366A6A'
  },
  {
    number: 60,
    color: '#1d2f51'
  },
  {
    number: 40,
    color: '#466B6A'
  },
];


export default class App extends Component {

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <View style={styles.container}>
          <Svg
            width={200}
            style={{
              shadowOffset: {
                width: 0,
                height: 32
              },
              elevation: 12,
              shadowRadius: 12.5,
              shadowOpacity: 1,
            }}
            height={200}
            viewBox={`-100 -100 200 200`}
          >
            {
              demoData.map((item, index) =>
                <Slice
                  index={index}
                  endAngle={Math.PI * 2}
                  color={item.color}
                  data={demoData}
                  key={'pie_shape_' + index}
                />
              )
            }
          </Svg>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

import React，{Component}来自'React'；
从“react native Svg”导入Svg；
进口{
样式表，
看法
}从“反应本机”；
从“/Slice”导入切片；
常数解调=[
{
电话号码：150，
颜色：“#28BD8B”
},
{
电话：110，
颜色：“#366A6A”
},
{
编号：60，
颜色：“#1d2f51”
},
{
电话号码：40，
颜色：“#466B6A”
},
];
导出默认类应用程序扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
{
demoData.map（（项目，索引）=>
)
}
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
},
});

---

如果您知道React Native的解决方案没有css或选择器，因此无法通过这种方式查询DOM的子集，请帮助我。使用d3.js转换数据并计算形状、路径数据等，然后使用声明性React方法进行渲染

例如，使用声明性方法，您可以通过使用

d3.arch.centroid（PathValue）

变换位置来获得拱门的中心，从而将文本标签添加到拱门中。请注意，

是从SVG导入的。因此，切片返回将类似于

...
return (
         <>
            <Path
                onPress={onPress}
                d={`${value}`}
                fill={color}
            />
           <Text transform={{ translate: d3.arc.centroid(value) }}>
              {value}
           </Text>
        </>
        )
...

。。。
返回(
{value}
)
...

---

结帐示例。

您需要再次阅读初始文档。