28 votos

Uso de D3.js con 2 angulares

Me han integrado con éxito Angular 2 (Alfa 44) con 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:

/// <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);

Todo está funcionando bien. Pero Angulares 2 documentación para ElementRef establece lo siguiente:

El uso de esta API como el último recurso cuando el acceso directo a DOM es necesario. El uso de plantillas y de enlace de datos proporcionados por los Angular en su lugar. Alternativamente, usted echa un vistazo a {@link Representador} que proporciona la API que puede ser utilizado incluso cuando el acceso directo a los elementos nativos no es compatible. Confiando en directo DOM access crea estrecha conexión entre la aplicación y la representación de las capas que hacen que sea imposible para separar a los dos y desplegar la aplicación en un web worker.

Ahora surge la pregunta de cómo integrar D3.js con el procesador de la API?

5voto

Eric Martinez Puntos 4489

El uso de Representador, usted necesita el raw elemento HTML (aka nativeElement). Así que, básicamente, usted tiene que utilizar lo que su biblioteca es, conseguir la raw elemento y se pasa a Representador.

Por ejemplo

// 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');

La advertencia acerca de la ElementRef es sobre el uso de ella directamente. Eso significa que este es desanimado

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

Pero esto está bien

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

Para mostrar los efectos que puede utilizar con jQuery

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

Mi recomendación es usb para usar lo que angular2 proporciona a hacer esto fácilmente sin depender de otro bibliotecas.

Con puro angular2 usted tiene dos maneras fáciles

  • El uso de las directivas de la
// 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 {}
  • El uso de ViewChild con las variables locales
@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');
    }
}

He aquí un plnkr con todos los casos que he mencionado en esta respuesta. Sus necesidades pueden ser diferentes, por supuesto, pero intenta utilizar angular2 siempre que puede.

-5voto

Ranga Puntos 44

usted realmente necesidad de mencionar d3 dependencia, mientras que la creación de la angulares Módulo como

angular.module('d3', [])
  .factory('d3Service', ['$document', '$q', '$rootScope'

usted puede consultar completa integrada angular con d3 desde github

http://www.ng-newsletter.com/posts/d3-on-angular.html

https://gist.github.com/auser/6506865#file-d3-example1-js

desde aquí esperamos que podría integrar el Angular con De bien.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X