D3.js数据可视化教程（二）：构建基础图表

2024-02-07 15:54:58

使用D3.js实现基础图表

数据准备

数据准备是数据可视化的第一步。我们首先需要将数据转换为D3.js可以理解的格式。这通常涉及将数据从CSV、JSON或其他格式转换为JavaScript对象或数组。

const data = [
  {
    name: "John",
    age: 25,
    city: "New York"
  },
  {
    name: "Mary",
    age: 30,
    city: "London"
  },
  {
    name: "Bob",
    age: 35,
    city: "Paris"
  }
];

图表布局

接下来，我们需要选择一个图表布局。D3.js提供了多种布局，包括条形图、饼状图、折线图和散点图等。我们根据数据的类型和想要传达的信息选择合适的布局。

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

const margin = {top: 20, right: 20, bottom: 30, left: 40};
const width = +svg.attr("width") - margin.left - margin.right;
const height = +svg.attr("height") - margin.top - margin.bottom;

const x = d3.scaleLinear()
  .domain([0, d3.max(data, d => d.age)])
  .range([margin.left, width - margin.right]);

const y = d3.scaleBand()
  .domain(data.map(d => d.name))
  .range([margin.top, height - margin.bottom]);

绘制图表

一旦我们有了数据和布局，就可以绘制图表了。这通常涉及使用D3.js的各种形状和路径生成器来创建图形元素，例如矩形、圆形和折线。

svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", d => x(d.age))
  .attr("y", d => y(d.name))
  .attr("width", 20)
  .attr("height", 20)
  .attr("fill", "steelblue");

添加交互元素

最后，我们可以添加交互元素，例如鼠标悬停和点击事件，使图表更具交互性。这通常涉及使用D3.js的各种事件处理程序来捕获用户输入并相应地更新图表。

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