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

d3js示例

admin
行业动态
2025-04-19
5

D3.js是一款基于JavaScript的数据可视化库，通过绑定数据与文档元素生成动态图表，它支持SVG、Canvas等格式，灵活实现折线图、柱状图、地图等交互式可视化效果，适用于数据分析、仪表盘开发等场景，具备强大的数据处理和DOM操控能力。

什么是D3.js？
D3.js（Data-Driven Documents）是一个基于JavaScript的开源数据可视化库，广泛用于通过HTML、SVG和CSS将数据转化为动态、交互式图表，它由斯坦福大学的Mike Bostock团队开发，凭借强大的数据处理能力和灵活的图形控制，成为数据科学、前端开发及数据分析领域的首选工具之一。

D3.js的核心优势

数据驱动：直接将数据绑定到DOM元素，实现数据的动态更新与渲染。
高度定制化：支持自定义图表类型，满足复杂场景需求。
跨平台兼容：适配现代浏览器，响应式设计适配不同设备。
丰富的生态系统：社区提供大量插件和扩展（如D3-force、D3-geo）。

D3.js实用示例与代码解析

示例1：基础柱状图

场景：展示某公司季度营收数据。
代码实现：

// 数据集
const data = [80, 120, 60, 150, 200];
const width = 500, height = 300;
// 创建SVG画布
const svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);
// 绘制柱状图
svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", (d, i) => i * 80)
  .attr("y", (d) => height - d)
  .attr("width", 40)
  .attr("height", (d) => d)
  .attr("fill", "#36a2eb");

效果：生成五个蓝色矩形，高度由数据驱动，适用于快速对比数值。

d3js示例第1张

示例2：动态折线图

场景：实时显示温度变化趋势。
代码实现：

// 生成随机数据
const dataset = Array.from({length: 10}, () => Math.random() * 100);
const margin = {top: 20, right: 20, bottom: 30, left: 50};
const innerWidth = 600 - margin.left - margin.right;
const innerHeight = 400 - margin.top - margin.bottom;
// 创建比例尺
const xScale = d3.scaleLinear()
  .domain([0, dataset.length - 1])
  .range([0, innerWidth]);
const yScale = d3.scaleLinear()
  .domain([0, 100])
  .range([innerHeight, 0]);
// 创建折线生成器
const line = d3.line()
  .x((d, i) => xScale(i))
  .y(d => yScale(d));
// 绘制折线
const svg = d3.select("body")
  .append("svg")
  .attr("width", 600)
  .attr("height", 400)
  .append("g")
  .attr("transform", `translate(${margin.left}, ${margin.top})`);
svg.append("path")
  .datum(dataset)
  .attr("fill", "none")
  .attr("stroke", "#ff6384")
  .attr("d", line);

效果：生成一条动态折线，支持数据更新和自动缩放。

示例3：交互式饼图

场景：展示用户兴趣分布，点击切换数据。
代码实现：

const data = [
  {label: "科技", value: 35},
  {label: "教育", value: 25},
  {label: "娱乐", value: 40}
];
const radius = 150;
const color = d3.scaleOrdinal(d3.schemeCategory10);
// 生成饼图布局
const pie = d3.pie().value(d => d.value);
const arcs = pie(data);
// 绘制扇形
const svg = d3.select("body")
  .append("svg")
  .attr("width", 400)
  .attr("height", 400);
const g = svg.append("g")
  .attr("transform", "translate(200, 200)");
g.selectAll("path")
  .data(arcs)
  .enter()
  .append("path")
  .attr("d", d3.arc().innerRadius(0).outerRadius(radius))
  .attr("fill", (d, i) => color(i))
  .on("click", (event, d) => {
    alert(`点击分类：${d.data.label}`);
  });

效果：点击扇形弹出分类名称，增强用户交互体验。

示例4：力导向图

场景：社交网络关系可视化。
代码实现：

const nodes = [{id: "A"}, {id: "B"}, {id: "C"}, {id: "D"}];
const links = [
  {source: "A", target: "B"},
  {source: "B", target: "C"},
  {source: "C", target: "D"}
];
// 创建力导向模拟器
const simulation = d3.forceSimulation(nodes)
  .force("link", d3.forceLink(links).id(d => d.id))
  .force("charge", d3.forceManyBody().strength(-100))
  .force("center", d3.forceCenter(300, 150));
// 绘制节点与连线
const svg = d3.select("body")
  .append("svg")
  .attr("width", 600)
  .attr("height", 300);
const link = svg.append("g")
  .selectAll("line")
  .data(links)
  .enter()
  .append("line")
  .attr("stroke", "#999");
const node = svg.append("g")
  .selectAll("circle")
  .data(nodes)
  .enter()
  .append("circle")
  .attr("r", 10)
  .attr("fill", "#4CAF50")
  .call(d3.drag()
    .on("start", dragstarted)
    .on("drag", dragged)
    .on("end", dragended));
// 动态更新位置
simulation.on("tick", () => {
  link.attr("x1", d => d.source.x)
    .attr("y1", d => d.source.y)
    .attr("x2", d => d.target.x)
    .attr("y2", d => d.target.y);
  node.attr("cx", d => d.x)
    .attr("cy", d => d.y);
});
function dragstarted(event) {
  if (!event.active) simulation.alphaTarget(0.3).restart();
  event.subject.fx = event.subject.x;
  event.subject.fy = event.subject.y;
}

效果：节点可拖拽，实时展示力学模拟效果。

D3.js学习建议