D3.js初体验——绘制一条极具洞察力的折线图

2024-02-08 18:43:17

构建画布

在开始绘制折线图之前，我们需要创建一个画布，即SVG元素，作为数据的承载容器。

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

2. 定义数据

为了让折线图具有实际意义，我们需要为其提供数据。数据可以来自各种来源，如数据库、电子表格或API。

var data = [
  {
    "month": "一月",
    "sales": 454
  },
  {
    "month": "二月",
    "sales": 628
  },
  // ...
];

3. 创建比例尺

为了将数据映射到可视化的图形上，我们需要创建比例尺。比例尺的作用是将数据值转换为视觉上的值。

var xScale = d3.scaleLinear()
    .domain([0, d3.max(data, function(d) { return d.month; })])
    .range([0, width]);

var yScale = d3.scaleLinear()
    .domain([0, d3.max(data, function(d) { return d.sales; })])
    .range([height, 0]);

4. 绘制折线

现在，我们可以使用D3.js强大的API来绘制折线。

var line = d3.line()
    .x(function(d) { return xScale(d.month); })
    .y(function(d) { return yScale(d.sales); });

svg.append("path")
    .datum(data)
    .attr("d", line)
    .attr("stroke", "steelblue")
    .attr("stroke-width", 2)
    .attr("fill", "none");

5. 添加轴

为了让折线图更易于解读，我们需要添加轴。

var xAxis = d3.axisBottom(xScale);

svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

var yAxis = d3.axisLeft(yScale);

svg.append("g")
    .call(yAxis);