D3.js折线图绘制实战：比例尺、路径生成与区域填充详解

const xScale = d3.scalePoint()
    .domain(data.map((d) => d.name))
    .range([0, dimensions.boundedWidth]);

// 构建一个默认为直线的线条绘制器
const lineGenerator = d3.line();
// 定义一下点位
const points = [
    [0, 50],
    [100, 200],
    [300, 100],
    [400, 150],
    [300, 200]
];
// 生成一条path路径
const linePath = lineGenerator(points);
// 渲染line
svg.append("path")
    .attr("d", linePath)
    .attr("fill", "none")
    .attr("stroke-width", 1)
    .attr("stroke", "red");

const points = [
    { x: 0, y: 50 },
    { x: 100, y: 200 },
    { x: 300, y: 100 },
    { x: 400, y: 150 },
    { x: 300, y: 200 }
];
const lineGenerator = d3
    .line()
    .x((d) => d.x)
    .y((d) => d.y);

const linePath = lineGenerator(points);

const lineGenerator = d3
    .line()
    .x((d) => d.x)
    .y((d) => d.y)
    .curve(d3.curveBasis) // 曲线插值

const line = d3.line()
    .x((d) => xScale(xValue(d)))
    .y((d) => yScale(yValue(d)));

chartG.append("g")
    .append("path")
    .style("fill", "none")
    .style("stroke", "rgb(51, 209, 243)")
    .style("stroke-width", 1)
    .datum(data)
    .attr("d", line);
复制代码

const areaGenerator = d3.area()
    .x((d) => d.x)
    .y1((d) => d.y)
    .y0(10);

const areaPath = areaGenerator(points);

svg
    .append("path")
    .attr("d", areaPath)
    .attr("fill", "none")
    .attr("stroke-width", 1)
    .attr("stroke", "red");

const points = [ // y 是递增的
{ x: 20, y: 50 },
{ x: 100, y: 100 },
{ x: 300, y: 150 },
{ x: 200, y: 200 },
{ x: 300, y: 230 }
];

const areaGenerator = d3.area()
    .y((d) => d.y)
    .x0(10)
    .x1((d) => d.x);

const area = d3.area()
    .x((d) => xScale(xValue(d)))
    .y1((d) => yScale(yValue(d)))
    .y0(yScale(0));

chartG.append("g")
    .append("path")
    .style("fill", "none")
    .style("fill", "green")
    .style("stroke", "rgb(51, 209, 243)")
    .style("stroke-width", 1)
    .datum(data)
    .attr("d", area);