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

d3js例子

admin
行业动态
2025-04-12
4

D3.js是一款基于Web标准的数据可视化库，可通过数据绑定DOM元素创建动态交互图表，典型示例包括柱状图、折线图、力导向图等，支持SVG/Canvas渲染，能实现数据动态更新、过渡动画及复杂交互逻辑，适用于构建定制化程度高的数据可视化项目。

数据可视化是现代Web开发中不可或缺的能力,而D3.js（Data-Driven Documents）作为基于JavaScript的开源库，凭借其灵活性和强大功能，已成为全球开发者首选的工具之一，以下将通过实际案例展示D3.js的核心应用场景，并提供可直接复用的代码片段。

核心概念与基础应用

D3.js通过绑定数据到DOM元素实现动态交互，其核心逻辑围绕数据更新、过渡效果和事件响应展开。

示例1：动态柱状图

d3js例子第1张

// 数据准备
const dataset = [30, 60, 90, 120, 150];
const svg = d3.select("body").append("svg").attr("width", 500).attr("height", 300);
// 比例尺设置
const xScale = d3.scaleBand()
  .domain(d3.range(dataset.length))
  .range([0, 400])
  .padding(0.1);
const yScale = d3.scaleLinear()
  .domain([0, d3.max(dataset)])
  .range([200, 0]);
// 绘制逻辑
svg.selectAll("rect")
  .data(dataset)
  .enter()
  .append("rect")
  .attr("x", (d, i) => xScale(i) + 50)
  .attr("y", d => yScale(d) + 50)
  .attr("width", xScale.bandwidth())
  .attr("height", d => 200 - yScale(d))
  .attr("fill", "#4CAF50");

此案例演示了比例尺配置和数据绑定机制,通过scaleBand实现等距分布，scaleLinear完成数值映射。

交互式可视化实现

示例2：实时数据仪表盘

// 初始化画布
const gauge = d3.select("#dashboard")
  .append("svg")
  .attr("width", 300)
  .attr("height", 300);
// 圆弧生成器
const arc = d3.arc()
  .innerRadius(80)
  .outerRadius(120)
  .startAngle(-Math.PI / 2);
// 动态更新函数  
function updateGauge(value) {
  const normValue = value / 100;
  gauge.selectAll("path")
    .data([{ endAngle: normValue * Math.PI - Math.PI/2 }])
    .join("path")
    .attr("d", arc)
    .attr("transform", "translate(150,150)")
    .attr("fill", d3.interpolateCool(normValue));
}
// 模拟实时数据
setInterval(() => updateGauge(Math.random()*100), 1500);

该仪表盘具备动态更新能力,使用d3.arc生成路径，结合interpolateCool实现颜色渐变，适合监控类场景。

地理空间数据渲染

示例3：交互式地图

// 加载地理数据
d3.json("https://cdn.jsdelivr.net/npm/world-atlas@2/countries-50m.json").then(data => {
  const projection = d3.geoMercator().fitSize([800, 500], data);
  const pathGenerator = d3.geoPath().projection(projection);
  d3.select("#map")
    .selectAll("path")
    .data(data.features)
    .enter()
    .append("path")
    .attr("d", pathGenerator)
    .attr("stroke", "#fff")
    .attr("fill", "#2196F3")
    .on("mouseover", function() {
      d3.select(this).attr("opacity", 0.7);
    });
});

此实现方案包含地图投影适配(fitSize)、路径生成和事件交互，需配合TopoJSON地理数据使用。