D3.js 教程

D3.js 是一个强大的JavaScript库，用于创建交互式数据可视化。以下是一些基础教程，帮助您开始使用 D3.js。

基础概念

选择器：用于选择DOM元素。
数据绑定：将数据与DOM元素绑定在一起。
更新和插入：在数据变化时更新DOM。

实践示例

绘制简单的折线图

引入D3.js库。
选择一个DOM元素作为画布。
创建一个比例尺。
绘制坐标轴。
绘制折线。

d3.select("body").append("svg")
  .attr("width", 500)
  .attr("height", 300)
  .append("path")
  .datum(data)
  .attr("fill", "none")
  .attr("stroke", "steelblue")
  .attr("stroke-width", 1.5)
  .attr("d", d3.line()
      .x(d => x(d.date))
      .y(d => y(d.close)));

交互式图表

通过添加交互功能，可以使图表更加生动。例如，可以添加鼠标悬停显示详细信息。

let tooltip = d3.select("body").append("div")
  .style("position", "absolute")
  .style("padding", "5px")
  .style("background", "rgba(255,255,255,0.8)")
  .style("border", "1px solid #ccc")
  .style("border-radius", "5px");

d3.select("path")
  .on("mouseover", function(event, d) {
    tooltip.html(`日期: ${d.date}<br>收盘价: ${d.close}`)
      .style("left", (event.pageX) + "px")
      .style("top", (event.pageY - 28) + "px");
  })
  .on("mouseout", function(d) {
    tooltip.style("visibility", "hidden");
  });

学习资源

更多关于D3.js的教程和示例，请访问本站D3.js教程。