把 D3 引入到 ionic2 中

第一步 安装

cnpm install @types/d3 --save

第二步 声明

在需要使用的组件中声明一下

import { Component } from '@angular/core';
import { NavParams } from 'ionic-angular';
import * as d3 from 'd3';  ++++++

第三步 写属于 D3 的方法即可

  createChart() {
    var chart = d3.select("#chart").append("svg")
      .attr("width", 100)
      .attr("height", 100)
      .append("g");

    var rows = [
      {x: 1, y: 1},
      {x: 2, y: 2},
      {x: 3, y: 3},
    ];

    var xScale = d3.scaleLinear()
      .range([0, 100])
      .domain([1, 3]);
    var yScale = d3.scaleLinear()
      .range([100, 0])
      .domain([1, 3]);

    chart.selectAll(".dot")
      .data(rows)
      .enter().append("circle")
      .attr("class", "dot")
      .attr("cx", (row) => { return xScale(row.x) })
      .attr("cy", (row) => { return yScale(row.y) })
      .attr("r", 3.5);
  }