Question

我想在我的Angular 2+项目中实现维恩图。我指的是代码-

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

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

  npm install venn.js

然后我以这种方式在angular2中实现了

app.component.ts

 导出类NodeVennComponent实现OnInit {

  套
  builder（）{}

  ngOnInit（）{

    this.sets = [{集：['A']，大小：12}，
             {套：['B']，尺寸：12}，
             {sets：['A'，'B']，size：2}]；
  }

}

app.component.html

   


<脚本>
  var chart = venn.VennDiagram（）;
  d3.select（“＃venn”）。datum（设置）.call（图表）;

app.component.scss

  #venn {

        字体家族：“ Helvetica Neue”，Helvetica，Arial，无衬线；
        font-size：14px;

}

index.html

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

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)

   }

}

希望这对您有所帮助。

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

1 个答案: