D3.js-图介绍

D3.js是一个用于制作数据可视化的JavaScript库。其中包含了许多图表类型，如散点图、折线图、柱状图、地图等。本文将介绍D3.js中的部分图表类型，并提供相应代码片段。

折线图

折线图用来表示随时间或其它因素而变化的数据。其基本思路是以时间或数据分成若干个点，然后连接这些点。下面是绘制折线图的基本步骤及代码片段。

1. 定义SVG区域

var svgWidth = 800, svgHeight = 600;
var margin = { top: 20, right: 20, bottom: 30, left: 50 };
var width = svgWidth - margin.left - margin.right;
var height = svgHeight - margin.top - margin.bottom;
var svg = d3.select('svg')
  .attr('width', svgWidth)
  .attr('height', svgHeight);
var g = svg.append('g')
  .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

2. 定义数据

var data = [
  { date: "2010-01-01", value: 10 },
  { date: "2010-02-01", value: 20 },
  { date: "2010-03-01", value: 30 },
  { date: "2010-04-01", value: 40 },
  { date: "2010-05-01", value: 50 },
  { date: "2010-06-01", value: 60 },
  { date: "2010-07-01", value: 70 },
  { date: "2010-08-01", value: 80 },
  { date: "2010-09-01", value: 90 },
  { date: "2010-10-01", value: 100 }
];

3. 定义比例尺

var x = d3.scaleTime()
  .rangeRound([0, width]);
var y = d3.scaleLinear()
  .rangeRound([height, 0]);
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain(d3.extent(data, function(d) { return d.value; }));

4. 添加路径

var line = d3.line()
  .x(function(d) { return x(d.date); })
  .y(function(d) { return y(d.value); });
g.append('path')
  .datum(data)
  .attr('fill', 'none')
  .attr('stroke', 'steelblue')
  .attr('stroke-linejoin', 'round')
  .attr('stroke-linecap', 'round')
  .attr('stroke-width', 1.5)
  .attr('d', line);

饼图

饼图用于比较不同部分占总体的比例。下面是绘制饼图的基本步骤及代码片段。

1. 定义SVG区域

var svgWidth = 800, svgHeight = 600;
var margin = { top: 20, right: 20, bottom: 30, left: 50 };
var width = svgWidth - margin.left - margin.right;
var height = svgHeight - margin.top - margin.bottom;
var svg = d3.select('svg')
  .attr('width', svgWidth)
  .attr('height', svgHeight);
var g = svg.append('g')
  .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

2. 定义数据

var data = [
  { name: "A", value: 10 },
  { name: "B", value: 20 },
  { name: "C", value: 30 },
  { name: "D", value: 40 },
  { name: "E", value: 50 },
];

3. 定义饼图布局

var pie = d3.pie()
  .sort(null)
  .value(function(d) { return d.value; });
var path = d3.arc()
  .outerRadius(radius - 10)
  .innerRadius(0);

4. 添加圆弧

var g = g.selectAll(".arc")
  .data(pie(data))
  .enter().append("g")
  .attr("class", "arc");
g.append("path")
  .attr("d", path)
  .attr("fill", function(d) { return color(d.data.name); })
  .attr('stroke', 'white')
  .on("mouseover", function(d) {
    d3.select(this)
      .transition()
      .duration(100)
      .attr('transform', 'scale(1.1)');
  })
  .on("mouseout", function(d) {
    d3.select(this)
      .transition()
      .duration(100)
      .attr('transform', 'scale(1)');
  });

散点图

散点图用于比较两个变量之间的关系。下面是绘制散点图的基本步骤及代码片段。

1. 定义SVG区域

var svgWidth = 800, svgHeight = 600;
var margin = { top: 20, right: 20, bottom: 30, left: 50 };
var width = svgWidth - margin.left - margin.right;
var height = svgHeight - margin.top - margin.bottom;
var svg = d3.select('svg')
  .attr('width', svgWidth)
  .attr('height', svgHeight);
var g = svg.append('g')
  .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

2. 定义数据

var data = [
  { x: 10, y: 20 },
  { x: 20, y: 30 },
  { x: 30, y: 40 },
  { x: 40, y: 50 },
  { x: 50, y: 60 },
  { x: 60, y: 70 },
  { x: 70, y: 80 },
  { x: 80, y: 90 },
  { x: 90, y: 100 },
  { x: 100, y: 110 }
];

3. 定义比例尺

var x = d3.scaleLinear()
  .rangeRound([0, width])
  .domain([0, d3.max(data, function(d) { return d.x; })]);
var y = d3.scaleLinear()
  .rangeRound([height, 0])
  .domain([0, d3.max(data, function(d) { return d.y; })]);

4. 添加点

g.selectAll("circle")
  .data(data)
  .enter().append("circle")
  .attr("cx", function(d) { return x(d.x); })
  .attr("cy", function(d) { return y(d.y); })
  .attr("r", 5)
  .attr("fill", "steelblue")
  .attr('stroke', 'white')
  .on("mouseover", function(d) {
    d3.select(this)
      .transition()
      .duration(100)
      .attr('r', 10);
  })
  .on("mouseout", function(d) {
    d3.select(this)
      .transition()
      .duration(100)
      .attr('r', 5);
  });

总结

本文介绍了D3.js中的三种图表类型：折线图、饼图和散点图，为了更好地展示图表，还提供了相应的代码片段。D3.js灵活的API可以帮助开发者轻松实现各种各样的数据可视化效果，是数据可视化的一大佼佼者。