2

我正在使用d3-shape库在React Native. 这是我的代码：

切片.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}
            />
        )

    }
}

这个类返回饼图的每一片。我想像这样向弧添加文本：

在此处输入图像描述

我搜索了很多，每个人都是这样回答的：

arcs.append("text")
    .attr("transform", function (d) {
    return "translate(" + newarc.centroid(d) + ")";
})
    .attr("text-anchor", "middle")
    .attr("fill", "white")
    .text(function (d) {
    return d.value + "%";
});

但这不起作用React Native它说：

append 不是一个函数。

有关更多信息，这是我的App.js

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的解决方案，请帮助我。

4

1 回答 1

1

React-Native 没有 css 或选择器，因此您不能以这种方式查询 DOM 的子集。使用 d3.js 进行数据转换和计算形状、路径数据等，然后使用声明式 React 方法进行渲染。

例如，使用声明性方法，您可以通过转换位置来将文本标签添加到拱门，d3.arch.centroid(PathValue)以获取拱门的中心。请注意，这<Text>是从 SVG 导入的。所以切片返回会是这样的；

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

查看这个 codepen示例。

于 2019-11-27T09:10:12.327 回答