dc.js charts with Angular2+

问题

Has any one used dc.js with Angular2+ application. Any help or pointers will be appreciated.

I am able to make my application running on normal html/java-script. Now I need to implement the same in Angular 2+ application.

回答1:

Edit: A couple of weeks later I have a much better understanding and can maybe give some better instructions, so here It goes:

After generating the angular project, install dc, its typefiles, and all needed dependencies like this:

npm i --save dc @types/dc crossfilter2 d3 @types/d3

Note that @types/crossfilter is not needed since crossfilter started to supply their own typefile directly inside their package. After that you can import dc, crossfilter, and d3 by importing them in the component and use them like this:

component.html:

<div #nameOfDiv></div>

component.ts

import * as d3 from 'd3';
import * as dc from 'dc';
import * as crossfilter from 'crossfilter2';
import {Dimension} from 'crossfilter2';

export class Graph {
    @ViewChild('nameOfDiv') chartDiv: ElementRef;
    private ndx: Dimension<T> = crossfilter<T>([{...}, {...}]);

    [...]

    paint() {
        let chart = dc.scatterPlot(this.chartDiv.nativeElement);
        chart.render();
    }
}

In the end do not forget to include the dcjs css stylesheet, either in the index.html as written in the old answer or wherever you'd like.

Old answer: I'm currently at the same point, have some limited experience with dc.js, d3.js, and crossfilter2 in plain html and js. Now I want to use dcjs in Angular 5.

I just painted the first mock example in a component by installing the @types files for dc, d3, and crossfilter and including the actual libraries in the index.html header.

index.html

<head>
[...]
  <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js'></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter2/1.4.5/crossfilter.js" rel="script"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.9/dc.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.9/dc.css" />
</head>

ng installs

ng install --save @types/dc
ng install --save @types/d3
ng install --save @types/crossfilter

component.ts

import * as dc from 'dc';
import * as CrossFilter from 'crossfilter';

interface Data {
date: string;
quantity: number;
[...]
}

export class GraphComponent {
  private chart: dc.PieChart;
  private ndx: CrossFilter.CrossFilter<Data> = crossfilter<Data>([{ date: '2011-11-14T16:17:54Z', quantity: 2, total: 190, tip: 100, type: 'tab' }, {...}])

  paintChart(): void {
    this.chart = dc.pieChart('#id__html_div');
    let dim = this.data.dimension((d) => d.date);
    let group = dim.group().reduceCount();
    this.chart.width(200).height(200).dimension(dim).group(group);
    dc.renderAll();
  }
}

Hope this helps a little. All of this is just what I did in the last few hours, this does not mean this is the intended way or the best way. I'm new to Angular and dcjs as well..

来源：https://stackoverflow.com/questions/48104529/dc-js-charts-with-angular2

标签

angular

dc.js

crossfilter