与角2使用D3.js

本文介绍了与角2使用D3.js的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我已经成功地角2（阿尔法44）与D3.js：

I have successfully integrated Angular 2 (Alpha 44) with 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>

app.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);

一切工作正常。但是，角2文档ElementRef规定如下：

Everything is working fine. But Angular 2 documentation for ElementRef states the following:

是需要DOM直接访问时，使用此API作为最后的手段。使用模板和数据绑定通过角提供替代。另外，您看看{@link渲染}提供即使在不支持原生元素直接访问，可以安全使用API。依托直接访问DOM创建应用程序和渲染层之间的紧耦合，这将使它不可能将二者分开和部署应用程序到一个网络工作者。

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

Now the question arises how to integrate D3.js with the Renderer API's?

推荐答案

要使用渲染器，你需要原始的HTML元素（又名nativeElement）。所以基本上，你必须使用无论你的库，获取原始元素，并把它传递给渲染器。

To use Renderer, you need the raw HTML element (aka nativeElement). So basically you have to use whatever your library is, get the raw element and pass it to Renderer.

例如

// h3[0][0] contains the raw element
var h3 = d3.select(this.el.nativeElement).select('h3');
this.renderer.setElementStyle(h3[0][0], 'background-color', 'blue');

有关ElementRef的警告是关于直接使用它。这意味着，这是鼓励

The warning about ElementRef is about using it directly. That means that this is discouraged

elementRef.nativeElement.style.backgroundColor = 'blue';

但是，这是好的。

But this is fine

renderer.setElementStyle(elementRef.nativeElement, 'background-color', 'blue');

有关展示的目的，您可以用jQuery的使用它，以及

For showing purposes you can use it as well with jQuery

// h2[0] contains the raw element
var h2 = jQuery(this.el.nativeElement).find('h2');
this.renderer.setElementStyle(h2[0], 'background-color', 'blue');

我的建议虽然是坚持使用什么angular2为您提供轻松地做到这一点，而不依赖于另一个库。

My recommendation though is to stick to use what angular2 provides you to do this easily without depending on another libraries.

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

With pure angular2 you have two easy ways

使用指令

// This directive would style all the H3 elements inside MyComp
@Directive({
    selector : 'h3',
    host : {
        '[style.background-color]' : "'blue'"
    }
})
class H3 {}

@Component({
    selector : 'my-comp',
    template : '<h3>some text</h3>',
    directives : [H3]
})
class MyComp {}

使用ViewChild与局部变量

@Component({
    selector : 'my-comp',
    template : '<h3 #myH3>some text</h3>',
})
class MyComp {
    @ViewChild('myH3') myH3;
    ngAfterViewInit() {
        this.renderer.setElementStyle(this.myH3.nativeElement, 'background-color', 'blue');
    }
}

下面是一个与我在这个答案中提到的所有案件。您的要求可能会有所不同，当然，但尝试时，您可以使用angular2。

Here's a plnkr with all the cases I mentioned in this answer. Your requirements may differ, of course, but try to use angular2 whenever you can.

这篇关于与角2使用D3.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！