当前位置：首页 > JavaScript

d3.js 实现

2026-03-01 07:11:26JavaScript

d3.js 实现基础图表

使用d3.js创建基础图表需要引入库文件并遵循数据绑定、DOM操作和绘制的流程。以下以柱状图为例说明核心步骤：

<!DOCTYPE html>
<html>
<head>
  <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
  <svg width="400" height="300"></svg>
  <script>
    const data = [10, 20, 30, 40, 50];
    const svg = d3.select("svg");

    svg.selectAll("rect")
      .data(data)
      .enter()
      .append("rect")
      .attr("x", (d, i) => i * 60)
      .attr("y", d => 300 - d * 5)
      .attr("width", 50)
      .attr("height", d => d * 5)
      .attr("fill", "steelblue");
  </script>
</body>
</html>

数据绑定与比例尺

d3.js通过比例尺将数据值映射到可视化空间。线性比例尺和序数比例尺是常见类型：

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

const colorScale = d3.scaleOrdinal()
  .domain(data)
  .range(d3.schemeCategory10);

添加坐标轴

坐标轴组件需要结合比例尺使用：

const axisBottom = d3.axisBottom(xScale);
svg.append("g")
  .attr("transform", "translate(0, 250)")
  .call(axisBottom);

过渡动画效果

d3.js提供transition()方法实现平滑动画：

svg.selectAll("rect")
  .transition()
  .duration(1000)
  .attr("y", d => 300 - d * 3)
  .attr("height", d => d * 3);

事件交互处理

通过事件监听器实现交互：

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

复杂图表实现

对于力导向图等复杂可视化，需使用特定布局：

const simulation = d3.forceSimulation(nodes)
  .force("charge", d3.forceManyBody())
  .force("link", d3.forceLink(links))
  .force("center", d3.forceCenter(200, 200));

响应式设计

通过窗口监听实现响应式调整：

function resize() {
  const width = window.innerWidth * 0.8;
  svg.attr("width", width);
  xScale.range([0, width]);
  svg.selectAll("rect").attr("x", (d, i) => i * (width/data.length));
}
window.addEventListener("resize", resize);

d3.js 实现