当前位置：首页 > 行业动态 > 正文

如何用D3.js轻松绘制吸睛折线图？

admin
行业动态
2025-04-18
6

使用D3.js绘制折线图需先定义SVG容器，设定x、y轴比例尺，通过d3.line()生成路径，用d3.axis添加坐标轴，将数据绑定到路径元素上，利用过渡动画优化视觉呈现，最后通过CSS或属性方法调整线条颜色与粗细。

折线图是数据可视化中常用的图表类型之一,能够清晰展示数据随时间或类别的变化趋势，使用D3.js实现折线图需要掌握数据绑定、比例尺计算和路径生成等核心功能，以下是详细实现步骤：

基础环境搭建

<!DOCTYPE html>
<html>
<head>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <style>
        .axis path { stroke: #666; }
        .line { fill: none; stroke: steelblue; stroke-width: 2; }
        .dot:hover { fill: red; }
    </style>
</head>
<body>
    <div id="chart"></div>
    <script>
        // 后续代码将在此处编写
    </script>
</body>
</html>

数据准备与容器创建
建议使用标准化的数据格式：

const dataset = [
    { date: "2025-01", value: 30 },
    { date: "2025-02", value: 80 },
    // ...其他数据点
];

比例尺设置（核心步骤）

如何用D3.js轻松绘制吸睛折线图？第1张

const margin = { top: 20, right: 30, bottom: 40, left: 50 };
const width = 800 - margin.left - margin.right;
const height = 400 - margin.top - margin.bottom;
const xScale = d3.scaleBand()
    .domain(dataset.map(d => d.date))
    .range([0, width])
    .padding(0.1);
const yScale = d3.scaleLinear()
    .domain([0, d3.max(dataset, d => d.value)])
    .range([height, 0]);

SVG画布生成

const svg = d3.select("#chart")
    .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", `translate(${margin.left},${margin.top})`);

折线路径绘制（关键技术点）

const lineGenerator = d3.line()
    .x(d => xScale(d.date) + xScale.bandwidth()/2)
    .y(d => yScale(d.value));
svg.append("path")
    .datum(dataset)
    .attr("class", "line")
    .attr("d", lineGenerator);

坐标轴与交互增强

// X轴
const xAxis = d3.axisBottom(xScale)
    .tickFormat(d3.timeFormat("%Y-%m"));
svg.append("g")
    .attr("class", "axis")
    .attr("transform", `translate(0,${height})`)
    .call(xAxis);
// Y轴
const yAxis = d3.axisLeft(yScale);
svg.append("g")
    .attr("class", "axis")
    .call(yAxis);
// 数据点交互
svg.selectAll(".dot")
    .data(dataset)
    .enter()
    .append("circle")
    .attr("class", "dot")
    .attr("cx", d => xScale(d.date) + xScale.bandwidth()/2)
    .attr("cy", d => yScale(d.value))
    .attr("r", 4)
    .on("mouseover", function(event, d) {
        d3.select(this).attr("r", 6);
        // 可添加tooltip显示数值
    })
    .on("mouseout", function() {
        d3.select(this).attr("r", 4);
    });

最佳实践建议：