Fatal编程技术网

使用D3.js和Angular 2

angular d3.js

使用D3.js和Angular 2,angular,d3.js,Angular,D3.js,我已经成功地将Angular 2（Alpha 44）与D3.js集成在一起： <html> <head> <title>Angular 2 QuickStart</title> <script src="../node_modules/systemjs/dist/system.src.js"></script> <script src="../node_modules/angular2/bundles/angular2

我已经成功地将Angular 2（Alpha 44）与D3.js集成在一起：

<html>
<head>
<title>Angular 2 QuickStart</title>
<script src="../node_modules/systemjs/dist/system.src.js"></script>
<script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script>
  System.config({packages: {'app': {defaultExtension: 'js'}}});
  System.import('app/app');
</script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>


角度2快速入门
config（{packages:{'app'：{defaultExtension:'js'}}}）；
系统导入（“应用程序/应用程序”）；
加载。。。
app.js：

/// <reference path="./../../typings/tsd.d.ts" />

import {Component, bootstrap, ElementRef} from 'angular2/angular2';

@Component({
  selector: 'my-app',
  template: '<h1>D3.js Integrated if background is yellow</h1>',
  providers: [ElementRef]
})
class AppComponent { 
  elementRef: ElementRef;

  constructor(elementRef: ElementRef) {
   this.elementRef = elementRef;
  }

afterViewInit(){
    console.log("afterViewInit() called");
    d3.select(this.elementRef.nativeElement).select("h1").style("background-color", "yellow");
  }
}
bootstrap(AppComponent);

//
从'angular2/angular2'导入{Component，bootstrap，ElementRef}；
@组成部分({
选择器：“我的应用程序”，
模板：“背景为黄色时集成D3.js”，
提供者：[ElementRef]
})
类AppComponent{
elementRef:elementRef；
构造函数（elementRef:elementRef）{
this.elementRef=elementRef；
}
afterViewInit（）{
log（“调用afterViewInit（）的”）；
d3.选择（this.elementRef.nativeElement）。选择（“h1”）.样式（“背景色”、“黄色”）；
}
}
bootstrap（AppComponent）；
一切正常。但是ElementRef的Angular 2文档说明如下：

当需要直接访问DOM时，使用此API作为最后手段。改用Angular提供的模板和数据绑定。或者，您可以看看{@link Renderer}，它提供了即使在不支持直接访问本机元素的情况下也可以安全使用的API。依赖直接DOM访问会在应用程序层和渲染层之间产生紧密耦合，这将使您无法将两者分离并将应用程序部署到web worker中

现在的问题是如何将D3.js与渲染器API集成？

要使用渲染器，您需要原始HTML元素（又称nativeElement）。因此，基本上，您必须使用任何库，获取原始元素并将其传递给渲染器

比如说

//h3[0][0]包含原始元素
var h3=d3.select（this.el.nativeElement）.select（'h3'）；
this.renderer.setElementStyle（h3[0][0]，'background color'，'blue'）；
关于ElementRef的警告是关于直接使用它。这意味着这是不鼓励的

elementRef.nativeElement.style.backgroundColor='blue'；
但这很好

renderer.setElementStyle（elementRef.nativeElement，'background color'，'blue'）；
为了便于显示，您也可以将其与jQuery一起使用

//h2[0]包含原始元素
var h2=jQuery（this.el.nativeElement）.find（'h2'）；
this.renderer.setElementStyle（h2[0]，'background color'，'blue'）；
不过，我的建议是坚持使用angular2提供的工具，以便轻松完成这项工作，而不必依赖其他库

使用纯angular2有两种简单的方法

  • 使用指令
//此指令将设置MyComp中所有H3元素的样式
@指示({
选择器：“h3”，
主持人:{
“[style.background color]”：“'blue'”
}
})
类H3{}
@组成部分({
选择器：“我的公司”，
模板：“一些文本”，
指令：[H3]
})
类MyComp{}
  • 将ViewChild与局部变量一起使用
@组件({
选择器：“我的公司”，
模板：“一些文本”，
})
类mycop{
@ViewChild（'myH3'）myH3；
ngAfterViewInit（）{
this.renderer.setElementStyle（this.myH3.nativeElement，'background color'，'blue'）；
}
}
下面是我在回答中提到的所有案例的例子。当然，您的需求可能会有所不同，但尽可能尝试使用angular2。

我在使用ElementRef时遇到问题，我不确定该API是否已更改。因此，我最终使用ViewContainRef获取nativeElement

import {Component, ViewContainerRef, OnInit} from '@angular/core';
declare var d3:any;
@Component({
    selector: 'line-chart',
    directives: [],
    template: `<div class="sh-chart">chart</div>`
})
export class LineChart implements OnInit{
    elem ;
    constructor(private viewContainerRef:ViewContainerRef) {}
    ngOnInit(){
        this.elem = this.viewContainerRef.element.nativeElement;

        d3.select(this.elem).select("div").style("background-color", "yellow");
    };
}

从'@angular/core'导入{Component，ViewContainerRef，OnInit}；
声明风险值d3：任何；
@组成部分({
选择器：'折线图'，
指令：[]，
模板：`图表`
})
导出类折线图实现OnInit{
元素；
构造函数（私有viewContainerRef:viewContainerRef）{}
恩戈尼尼特（）{
this.elem=this.viewContainerRef.element.nativeElement；
d3.选择（这个元素）。选择（“div”）.样式（“背景色”、“黄色”）；
};
}
试试这个：

npm安装d3@3.5.36--保存
以设置所需的版本

npm安装@types/d3@3.5.36--保存
或者更高的版本，如果你想要D34的话+

然后在你的
ts
do

import*从“d3”作为d3导入

应该没问题


npm install --save d3


检查package.json中的d3版本，并在node_模块中检查它

然后，在component.ts中，按如下方式导入它


import * as d3 from 'd3';



这有帮助吗？我还试图让D3与angular 2一起工作。在上面的示例中，我可以看到您在index.html中引用了d3脚本，但我看不出您是如何在app.js？@user2915962-npm install d3中获得d3变量的，请确保postinstall运行并且由tsd创建d3.d.ts，然后从“d3/d3”中导入作为d3的这里的一条评论中提到了一段视频：这很有趣interesting@urosjarc-这是Angular 1，它有一种非常不同的方式来做这类事情。因此，以使用bootstrap的折叠插件为例，我说的
jQuery（this.el.nativeElement）.collapse（'show'）对吗
将是一种完全可以接受的实例化插件的方法？我猜指令方法不适用于动态附加的H3，对吗？示例：使用最新的d3（v4）并基于angular 2 quickstart示例，我还必须添加
'd3'：'npm:d3'
到map和
'd3'：{main:'build/d3.js'，defaultExtension:'js'}
到
systemjs.config.js
文件中的包中。Hi@Entrodus，你介意根据quickstart给我确切的安装顺序吗？我试着遵循这一点，包括你提议的系统的mod，但我还是被卡住了（没有./build/d2.js，也没有./build文件夹）@StéphanedeLuca:1.设置angular quickstart>2.为d3版本4.4.0>3安装d3和打字。在system.config.js>4中添加d3的地图和软件包指令。在使用d3>5.0的angular组件中添加d3导入。