数据可视化：用D3轻松实现令人惊叹的柱状图

2023-10-15 17:07:41

用SVG开启数据之旅

SVG（可缩放矢量图形）是一种基于XML的图形格式，可用于创建可缩放的矢量图形。D3.js利用SVG的强大功能，允许您创建可缩放、可交互的图形。

D3.js：数据可视化的利器

D3.js是一个功能强大的JavaScript库，专为数据可视化而设计。它提供了丰富的API和方法，使您能够轻松创建各种类型的图表和图形。

实现柱状图的步骤

导入必要的库：

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

创建一个空的SVG元素：

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

定义数据：

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

定义比例尺：

var xScale = d3.scaleBand()
    .range([0, width])
    .padding(0.1);

var yScale = d3.scaleLinear()
    .range([height, 0]);

xScale.domain(data.map(function(d) { return d.name; }));
yScale.domain([0, d3.max(data, function(d) { return d.value; })]);

创建柱状图：

var bars = svg.selectAll("rect")
    .data(data)
    .enter()
    .append("rect")
    .attr("x", function(d) { return xScale(d.name); })
    .attr("y", function(d) { return yScale(d.value); })
    .attr("width", xScale.bandwidth())
    .attr("height", function(d) { return height - yScale(d.value); })
    .attr("fill", "steelblue");