Javascript React原生w/D3JS的流图。需要将所有区域合并为一个区域。迭代不起作用

我们正在尝试在React Native中创建此流图：

这是我想从下面创建系列的数据：

const data = [
  {
    time: 1, travel: 1000, politics: 734, sports: 782, business: 655, technology: 745, fashion: 353, society: 430, shopping: 228, science: 239, spirituality: 274, realestate: 236, pets: 125, news: 154, homeandgarden: 19, hobbies: 89, healthfitness: 236, food: 154, finance: 19, familyparenting: 125, education:  236, career: 274, cars: 239, entertainment: 353
  },
  {
    time: 2, travel: 1023, politics: 694, sports: 779, business: 587, technology: 812, fashion: 349, society: 409, shopping: 240, science: 262, spirituality: 232, realestate: 223, pets: 112, news: 173, homeandgarden: 25, hobbies: 45, healthfitness: 223, food: 173, finance: 25, familyparenting: 112, education:  223, career: 232, cars: 262, entertainment: 349
  },
  {
    time: 3, travel: 983, politics: 739, sports: 789, business: 623, technology: 669, fashion: 381, society: 311, shopping: 226, science: 213, spirituality: 247, realestate: 192, pets: 140, news: 152, homeandgarden: 17, hobbies: 56, healthfitness: 192, food: 152, finance: 17, familyparenting: 140, education:  192, career: 247, cars: 213, entertainment: 381
  },
.
.
.
.
];

这是下面系列（片段）的实际创建

以此类推，我们制作了12个区域，代表一天12小时内的12个切片

我们用这个颜色fn给切片上色

  const color = d3.scale.scaleOrdinal()
    .domain(series)
    .range(d3.chromatic.schemeAccent)

然后我们使用12个路径组件来渲染该区域

export default class App extends React.Component {
  render() {
    return (
    <SafeAreaView style={styles.root}>
      <View style={styles.container}>
        <Svg{...{width, height}}>
          <Path d = {area1} fill={z(Math.random())}/>
          <Path d = {area2} fill={z(Math.random())}/>
          <Path d = {area3} fill={z(Math.random())}/>
          <Path d = {area4} fill={z(Math.random())}/>
          <Path d = {area5} fill={z(Math.random())}/>
          <Path d = {area6} fill={z(Math.random())}/>
          <Path d = {area7} fill={z(Math.random())}/>
          <Path d = {area8} fill={z(Math.random())}/>
          <Path d = {area9} fill={z(Math.random())}/>
          <Path d = {area10} fill={z(Math.random())}/>
          <Path d = {area11} fill={z(Math.random())}/>
          <Path d = {area12} fill={z(Math.random())}/>

        </Svg>
      </View>
    </SafeAreaView>

  )
  }
}

导出默认类App扩展React.Component{
render（）{
返回(
)
}
}

结果是这样的：

---

我们如何创建一个组件来渲染相同的图像？我们尝试了许多不同的迭代方法，但都没有成功。我们已经花了将近一周的时间在这上面了。如果能找到更可行的解决方案，我们将不胜感激

您希望在react native中重新创建此图表的原因是什么？我建议您保留d3.js代码本身，不要用多个react组件或模板构建图表。而是使用普通的es6或typescript类来拆分代码。它将使您的调用堆栈保持较短，开发人员也会这样说。将前端框架引入其中，将不必要地使图表不同部分之间的开发、测试、调试和通信复杂化。我是凭经验说的。嘿，谢谢你的及时回复。我们怎么做？我们将D3JS代码放在哪里，如何将其称为react native？将完整的图表放在单个react组件中。用react创建一个最小的容器，剩下的就让d3.js来做。您可以使用自定义挂钩来引入d3js。

export default class App extends React.Component {
  render() {
    return (
    <SafeAreaView style={styles.root}>
      <View style={styles.container}>
        <Svg{...{width, height}}>
          <Path d = {area1} fill={z(Math.random())}/>
          <Path d = {area2} fill={z(Math.random())}/>
          <Path d = {area3} fill={z(Math.random())}/>
          <Path d = {area4} fill={z(Math.random())}/>
          <Path d = {area5} fill={z(Math.random())}/>
          <Path d = {area6} fill={z(Math.random())}/>
          <Path d = {area7} fill={z(Math.random())}/>
          <Path d = {area8} fill={z(Math.random())}/>
          <Path d = {area9} fill={z(Math.random())}/>
          <Path d = {area10} fill={z(Math.random())}/>
          <Path d = {area11} fill={z(Math.random())}/>
          <Path d = {area12} fill={z(Math.random())}/>

        </Svg>
      </View>
    </SafeAreaView>

  )
  }
}