使用 D3 和 Angular 创建多功能可视化

图片来自

Opensource.com

我们的世界基于数据。我们在任何地方收集数据：表格、反馈、学习技术、数据挖掘等。在处理这些数据时，我们需要做的不仅仅是向用户展示数字；我们需要让用户轻松理解这些数字的含义。

通过结合 D3 数据可视化工具和 Angular 跨平台应用程序开发平台，我们可以获取这些数据并创建多功能且交互式的可视化，以响应动态数据。这可以从您的数据中榨取最后 10% 的价值，并将您的基于数据的应用程序提升到更高的水平，以供您的用户使用。

什么是 D3？

D3.js 是一个开源 JavaScript 库，它提供由数据驱动的文档对象模型 (DOM) 的强大操作。它为您提供了创建您可以想象的任何可视化所需的所有工具。您可以获得用于准备数据的数据转换、用于可视化数据的形状创建、用于将数据转换为不同表示布局的布局、用于在数据和形状更改时赋予视觉效果的过渡以及用于交互的强大工具。它基于 Web 标准，允许您使用 HTML、CSS 和 SVG 转换数据并赋予其生命力。

D3 入门很容易。要创建可视化，我们首先需要一个 SVG 元素来使用

var width = 500,
    height = 500;
var svg = d3.select('body')
    .append('svg')
    .attr('width', width)
    .attr('height', height)
    .append('g')
    .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ') rotate(-90 0 0)');

让我们创建一个旭日图来玩一玩。把它想象成一个多层甜甜圈图，非常适合显示分层数据。（它也比简单的条形图示例更有趣。）要开始，我们需要一个形状的生成器，在本例中是一个弧。 D3 提供了一个生成器来创建您可以自定义的圆形扇区。

var arc = d3.svg.arc()
    .startAngle(function(d) {
      return Math.max(0, Math.min(2 * Math.PI, xScale(d.x)));
    })
    .endAngle(function(d) {
      return Math.max(0, Math.min(2 * Math.PI, xScale(d.x + d.dx)));
    })
    .innerRadius(function(d) {
      return Math.max(0, yScale(d.y));
    })
    .outerRadius(function(d) {
      return Math.max(0, yScale(d.y + d.dy));
    });

现在我们准备好数据了。

通用更新模式

D3 有一种处理数据的方式。模式是连接、进入、更新和退出。这涉及用于合并新数据和现有数据的数据连接，然后是对数据进行输入、更新和删除。使用 D3，通过 data()、append()、transition() 和 exit() 可以轻松实现此模式。

/* JOIN new data with old elements */
var gs = svg.selectAll('g')
  .data(partition.nodes(root));

/* ENTER new elements present in new data */
var g = gs.enter().append('g')
  .on('click', click)
  .on('mouseover', mouseoverArc)
  .on('mousemove', mousemoveArc)
  .on('mouseout', mouseoutArc);

var path = g.append('path');

/* UPDATE old elements present in new data */
gs.select('path')
  .style('fill', function(d) {
      return color((d.co ? d.co : 'base'));
  })
  .transition().duration(500)
  .attr('d', arc)
  .each(function(d) {
      this.x0 = d.x;
      this.dx0 = d.dx;
  });

/* EXIT old elements not present in new data */
gs.exit()
  .transition()
  .duration(500)
  .style('fill-opacity', 0)
  .remove();

通过将所有这些与一些数据放在一起，D3 将完成创建我们的旭日图的繁重工作。我们甚至设置了函数来提供交互性（请参阅代码的 ENTER 部分）。但是，如果我们希望此图表与其他图表进行通信怎么办？输入 Angular 组件。

什么是 Angular？

Angular 是一个用于构建移动和桌面 Web 应用程序的平台。这是一个用于构建应用程序的自以为是的框架，为您提供所需的所有部分。它是一个很多东西，但我们将专注于一个部分：组件。它们是 UI 的基本构建块和 Angular 代码，将与我们的 D3 代码交互。

当我们的力量结合起来

组件增强 D3 可视化的两个强大部分是输入和输出。输入允许我们的组件接收数据，这意味着我们可以拥有一个组件来生成我们的旭日图，该组件不知道如何获取数据，但仍然会在数据传入时呈现它。输出允许我们的组件将数据传递回父组件，将事件和数据传递回堆栈。

@Input()
sunData: dataPoint[];

@Input()
filters: string[];

@Output()
onFilter: EventEmitter<string[]> = new EventEmitter<string[]>();

Angular 在其代码中使用装饰器和 TypeScript，这为您的代码增加了很多价值和功能。 @Input 和 @Output 的属性装饰器定义了我们组件的输入和输出。通过以这种方式定义属性，Angular 编译器会自动创建与该属性的绑定并链接它。在输入上，我们可以为我们的数据分配一个类型。它通过定义它期望的数据来创建更好的代码，这将在您将组件连接到 Angular 应用程序中的其他代码时派上用场。 Angular 还可以使用不同的更改检测策略来优化组件。您可以告诉组件仅在推送时才更新自身，它会查看输入的引用，并且仅在它更改时才更新。

在我们的输出上，我们使用 EventEmitter。这使我们的组件能够将数据发送到提供给我们的组件的函数。我们可以将其连接到我们的可视化和单击事件。当我们单击点时，我们可以将值传递到包含组件，例如 DashboardComponent。然后，DashboardComponent 可以通过过滤数据或查询 API 来更新数据。我们的 D3 旭日图组件和我们创建的任何其他组件都会看到更改，并且通用更新模式将接管。