如何将venn图代码从javascript <script>标记转换为angular2

Question

我想在我的角2+项目中实现venn图。我指的是密码-

http://jsfiddle.net/johnpham92/h04sknus/

为此，我首先运行了这个命令-

 npm install venn.js

然后我用angular2实现了-

app.component.ts

export class NodeVennComponent implements OnInit {

  sets
  constructor() { }

  ngOnInit() {

    this.sets = [ {sets: ['A'], size: 12},
             {sets: ['B'], size: 12},
             {sets: ['A','B'], size: 2}];
  }

}

app.component.html

<div id="venn"></div>


<script>
  var chart = venn.VennDiagram();
  d3.select("#venn").datum(sets).call(chart);

  </script>

app.component.scss

#venn{

        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
        font-size: 14px;

}

index.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src="https://cdn.rawgit.com/benfred/venn.js/master/venn.js"></script>

但我在屏幕上没有输出。屏幕是空白的。请帮帮忙。

Answer 1

您可以在https://stackblitz.com/edit/angular-f4popv上看到一个有用的示例

import { Component, OnInit } from '@angular/core';

// import * as fs from 'graceful-fs';
// now go and do stuff with it... 
//fs.writeFile('test.delme')
//fs.readdir('./');

import * as d3 from 'd3'
import * as venn from 'venn.js'



@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 6';

  sets = [ {sets: ['A'], size: 12}, 
                {sets: ['B'], size: 8},
                {sets: ['C'], size: 5},
                {sets: ['D'], size: 10},
                {sets: ['A','B'], size: 2},
                {sets: ['A','C'], size: 2},
                {sets: ['A','D'], size: 2}];

  ngOnInit(){
    // console.log(grfs);
    console.log( "d3 ", d3 );
    console.log( "venn ", venn );

    var chart = venn.VennDiagram()
    d3.select("#venn")
      .datum(this.sets)
      .call( chart );

    console.log( this.sets );

    // redraw the diagram on any change in input
    d3.selectAll("#venn").on("mouseover", function(d) {

        d3.selectAll("#venn").data()[0].forEach( 
          function (dd, ii){
            dd.size = Math.round( Math.random()*20+1 );
            console.log( `${ii} ${dd.sets} `, dd.size );
          }
        );

        d3.select("#venn").datum(d).call(chart);
    });

    // setTimeout( () => {
    //   console.log("timeout out")
    //   this.sets[0].size = 5;
    // },2000)

   }

}

希望这能帮到你。