angular 创建服务器
我们的世界基于数据。 我们到处收集数据：表格，反馈，学习技术，数据挖掘等。在处理这些数据时，我们需要做的不仅仅是向用户显示数字。 我们需要让他们容易理解数字的含义。
通过结合使用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是用于构建移动和桌面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 。 这使我们的组件能够向提供给我们组件的功能发送数据。 我们可以将其连接到可视化和click事件。 单击点时，可以将值传递到包含组件的信息，例如DashboardComponent 。 然后， DashboardComponent可以通过过滤数据或查询API来更新数据。 我们的D3 sunburst组件和我们创建的任何其他组件都将看到更改，并且常规更新模式将接管。
面向未来的开源
使用Angular和D3的重要方面之一是它们都是开源的，并提供了来自每个社区的大量示例。 例如，D3有一个很棒的社区，从基本到富有想象力，都有大量图表。 它们可以为您的数据提供灵感，也可以作为起点，帮助您开始创建大创意。
要了解更多信息，请参加2017年9月21日至22日在亚特兰大举行的Connect.Tech上John Niedzwiecki的演讲“ D3 + Angular = Visual Awesomesauce”。
angular 创建服务器
扫一扫
2469
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
