当前位置：首页 > JavaScript

d3.js 实现

2026-04-04 07:49:09JavaScript

D3.js 基础实现方法

D3.js（Data-Driven Documents）是一个基于JavaScript的数据可视化库，通过操作DOM和数据绑定实现动态图表。以下是基础实现步骤：

安装D3.js库：

<script src="https://d3js.org/d3.v7.min.js"></script>

创建SVG容器：

const svg = d3.select("body").append("svg")
  .attr("width", 500)
  .attr("height", 300);

数据绑定与图形绘制：

const data = [10, 20, 30, 40, 50];
svg.selectAll("circle")
  .data(data)
  .enter()
  .append("circle")
  .attr("cx", (d, i) => i * 50 + 30)
  .attr("cy", d => 150 - d)
  .attr("r", d => d / 2);

常用图表实现示例

柱状图实现：

const barChart = d3.select("#chart")
  .append("svg")
  .attr("width", 400)
  .attr("height", 200);

barChart.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", (d, i) => i * 40)
  .attr("y", d => 200 - d * 3)
  .attr("width", 30)
  .attr("height", d => d * 3)
  .attr("fill", "steelblue");

折线图实现：

const line = d3.line()
  .x((d, i) => i * 50)
  .y(d => 150 - d);

svg.append("path")
  .datum(data)
  .attr("d", line)
  .attr("stroke", "red")
  .attr("fill", "none");

高级功能实现

交互功能添加：

d3.selectAll("circle")
  .on("mouseover", function() {
    d3.select(this)
      .attr("fill", "orange");
  })
  .on("mouseout", function() {
    d3.select(this)
      .attr("fill", "steelblue");
  });

动画过渡效果：

d3.selectAll("rect")
  .transition()
  .duration(1000)
  .attr("y", d => 200 - d * 2)
  .attr("height", d => d * 2);

数据更新与动态可视化

数据更新模式：

function update(newData) {
  const circles = svg.selectAll("circle")
    .data(newData);

  circles.exit().remove();

  circles.enter()
    .append("circle")
    .merge(circles)
    .attr("cx", (d, i) => i * 50 + 30)
    .attr("cy", d => 150 - d)
    .attr("r", d => d / 2);
}

比例尺应用：

const xScale = d3.scaleLinear()
  .domain([0, d3.max(data)])
  .range([0, 400]);

const yScale = d3.scaleBand()
  .domain(data.map((d, i) => i))
  .range([0, 200]);

最佳实践建议

模块化代码组织：

function createChart(container, data) {
  const margin = {top: 20, right: 20, bottom: 30, left: 40};
  const width = 600 - margin.left - margin.right;
  const height = 400 - margin.top - margin.bottom;

  const svg = d3.select(container)
    .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})`);

  // 添加图表元素...
}

性能优化技巧：

d3.js 实现