31、D3 可复用可视化实践指南

D3 可复用可视化实践指南

在数据可视化领域，D3（Data-Driven Documents）是一个强大的工具，它能帮助开发者创建出各种精美的可视化图表。然而，之前的 D3 示例大多缺乏可复用性，无法满足实际应用中在大型应用（如仪表盘）里创建可视化的需求。接下来，我们将深入探讨如何创建可复用的 D3 可视化图表，以散点图为例进行详细讲解。

可复用散点图的创建与配置

首先，我们来看如何调用散点图函数来创建和配置图表。以下是示例代码：

// Create and configure the charts
var highwayCityChart = scatterplot()
  .width(300)
  .height(300)
  .x(function(d) { return d.highway })
  .xLabel('Highway / mpg')
  .y(function(d) { return d.city })
  .yLabel('City / mpg')
var displacementCityChart = scatterplot()
  .width(300)
  .height(300)
  .x(function(d) { return d.displ })
  .xLabel('Displacement / L')
  .y(function(d) { return d.city })
  .yLabel('City / mpg')
// Attach the data to the element that will hold the chart and 'call' it.