Question

我想在我的一个项目中使用D3图表，请帮忙。

我尝试了安装过程。但它没有正常工作peasen为我提供了另一个解决方案，所以可以在现有项目中实现它。

for(i in unique(lookup)){
    need_to_replace = is.na(d[[i]]) & (d$pat %in% names(lookup[lookup %in% i]))
    d[[i]][need_to_replace] = 0
}

d

   pat gene Apple Banana Carrot
1 101    a   0.1     NA     NA
2 101    b   0.2     NA     NA
3 101    c   0.3     NA     NA
4 102    d   0.4   0.00     NA
5 102    e   0.0   0.55     NA
6 103    f    NA     NA    0.6

Answer 1

D3图表有两种实现方式

1.ng2-nvd3图表

2.ngx图表

所以我要实施ng2-nvd3图表

也可以从克隆它 https://github.com/DevInder1/ng2-nvd3-charts

首先需要安装

npm install ng2-nvd3 --save

然后在NgModule中导入它，还需要导入d3和nvd3，因为我在下面导入

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import 'd3';
import 'nvd3'
import {NvD3Module} from "ng2-nvd3";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NvD3Module,

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在此之后你必须在.angular-cli.json文件中添加样式

"styles": [
        "styles.css",
        "../node_modules/nvd3/build/nv.d3.css"
      ],

接下来，您必须转到我正在使用的此示例中的component.ts文件 app.component.ts，您必须向图表提供数据和选项对象指令

import {Component} from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  options: any;
  data: any;


  constructor() {
    this.options = {
      chart: {
        type: 'pieChart',
        height: 500,
        x: function (d) {
          return d.key;
        },
        y: function (d) {
          return d.y;
        },
        showLabels: true,
        duration: 500,
        labelThreshold: 0.01,
        labelSunbeamLayout: true,
        legend: {
          margin: {
            top: 5,
            right: 35,
            bottom: 5,
            left: 0
          }
        }
      }
    };

    this.data = [
      {
        key: "P60-1",
        y: 256
      },
      {
        key: "P60-2",
        y: 445
      },
      {
        key: "P40",
        y: 225
      },
      {
        key: "P73",
        y: 127
      },
      {
        key: "P71",
        y: 128
      }
    ];
  }
}

一旦你的Html完成需要在我的例子中提供Chart指令，那就是app.component.html

<div>
  <nvd3 [options]="options" [data]="data"></nvd3>
</div>

Answer 2

ngx-nvd3的端到端解决方案。角度6

要求：

1.Install "d3": "^3.5.17"
2.Install "ngx-nvd3": "^1.0.9"

app.module.ts（appModule）

import { NvD3Module } from 'ngx-nvd3'
imports: [NvD3Module]

admin.component.html（HTML）

<div>
    <nvd3 [options]="options" [data]="datas"> 
    </nvd3>
</div>

admin.component.ts（Component .ts文件）

import * as d3 from "d3";

datas:any

styleUrls: ['./adminpanel.component.css','../../../node_modules/nvd3/build/nv.d3.css']

this.options = {
  chart: {
    type: 'discreteBarChart',
    height: 450,
    margin: {
      top: 20,
      right: 20,
      bottom: 50,
      left: 55
    },
    x: function (d) {
      return d.label;
    },
    y: function (d) {
      return d.value + (1e-10);
    },
    showValues: true,
    valueFormat: function (d) {
      return d3.format(',.4f')(d);
    },
    duration: 500,
    xAxis: {
      axisLabel: 'X Axis'
    },
    yAxis: {
      axisLabel: 'Y Axis',
      axisLabelDistance: -10
    }
  }
};

  this.datas = [
    {
      key: "Cumulative Return",
      values: [
        {
          "label" : "A" ,
          "value" : -29.765957771107
        } ,
        {
          "label" : "B" ,
          "value" : 0
        } ,
        {
          "label" : "C" ,
          "value" : 32.807804682612
        } ,
        {
          "label" : "d" ,
          "value" : 60.807804682612
        } ,
        {
          "label" : "e" ,
          "value" : 70.807804682612
        } ,
        {
          "label" : "f" ,
          "value" : 80.807804682612
        } ,
      ]
    }
  ];

如何使用角度为2或4的D3图表

2 个答案: