使用 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 的基本构建块，也是将与我们的 D3 代码交互的 Angular 代码。

结合我们的力量

增强 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 旭日图组件和我们创建的任何其他组件都将看到更改，并且通用更新模式将接管。