React Native中如何将D3折线图从曲线改为直折线？

我已经学完React Native中的D3折线图教程，作为D3新手，希望将示例中的折线图从曲线样式改为直折线（锯齿状）样式，请问代码中需要修改哪些参数？

代码如下：

import {curveBasis, line, scaleLinear, scaleTime} from 'd3';
import React from 'react';
import {Dimensions, StyleSheet, SafeAreaView} from 'react-native';

import {parse, Path as RePath} from 'react-native-redash';

import Animated from 'react-native-reanimated';
import {
  animatedData,
  animatedData2,
  animatedData3,
  DataPoint,
  originalData,
} from './Data';
import LineChart from './LineChart';

const {width} = Dimensions.get('screen');

const CARD_WIDTH = width - 20;
const GRAPH_WIDTH = CARD_WIDTH - 60;
const CARD_HEIGHT = 325;
const GRAPH_HEIGHT = 200;

export type GraphData = {
  max: number;
  min: number;
  curve: RePath;
  mostRecent: number;
};

const makeGraph = (data: DataPoint[]) => {
  const max = Math.max(...data.map(val => val.value));
  const min = Math.min(...data.map(val => val.value));
  const y = scaleLinear().domain([0, max]).range([GRAPH_HEIGHT, 35]);

  const x = scaleTime()
    .domain([new Date(2000, 1, 1), new Date(2000, 1, 15)])
    .range([10, GRAPH_WIDTH - 10]);

  const curvedLine = line<DataPoint>()
    .x(d => x(new Date(d.date)))
    .y(d => y(d.value))
    .curve(curveBasis)(data);

  return {
    max,
    min,
    curve: parse(curvedLine!),
    mostRecent: data[data.length - 1].value,
  };
};

const graphData: GraphData[] = [
  makeGraph(originalData),
  makeGraph(animatedData),
  makeGraph(animatedData2),
  makeGraph(animatedData3),
];

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <Animated.View style={styles.graphCard}>
        <LineChart
          height={GRAPH_HEIGHT}
          width={GRAPH_WIDTH}
          data={graphData}
          bottomPadding={20}
          leftPadding={0}
        />
      </Animated.View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 20,
    alignItems: 'center',
  },
  graphCard: {
    elevation: 5,
    borderRadius: 20,
    height: CARD_HEIGHT,
    width: CARD_WIDTH,
    backgroundColor: 'white',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
  },
});

export default App;

只需要修改两处（或简化为一处）即可实现直折线效果：

1. 替换曲线生成器导入：
   当前代码导入的curveBasis是生成平滑曲线的配置，要改成直折线，需要替换成curveLinear（D3默认的直线连接生成器）：

   // 原代码
   import {curveBasis, line, scaleLinear, scaleTime} from 'd3';
   // 修改后
   import {curveLinear, line, scaleLinear, scaleTime} from 'd3';
   

2. 更新line函数的curve配置：
   在makeGraph函数里，将曲线生成器从curveBasis改为curveLinear：

   // 原代码
   const curvedLine = line<DataPoint>()
     .x(d => x(new Date(d.date)))
     .y(d => y(d.value))
     .curve(curveBasis)(data);
   // 修改后
   const curvedLine = line<DataPoint>()
     .x(d => x(new Date(d.date)))
     .y(d => y(d.value))
     .curve(curveLinear)(data);
   

简化写法 #

因为D3的line()函数默认就是使用curveLinear，所以也可以直接去掉.curve()这一行，效果完全相同：

const curvedLine = line<DataPoint>()
  .x(d => x(new Date(d.date)))
  .y(d => y(d.value))(data);

修改完成后，折线图就会变成数据点之间直接用直线连接的锯齿状样式。

内容的提问来源于stack exchange，提问作者Dave Diggler