D3圖表與Angular 4的集成

Question

我正在使用D3圖表庫在Angular 4應用程序中創建平行坐標可視化圖表，並且我已經在應用程序中安裝了D3的npm軟件包。 D3版本是4以下是我正在嘗試的。

import { Component, OnInit,ViewEncapsulation } from '@angular/core';
import * as d3 from 'd3';
import * as scale from 'd3-scale';

@Component({
    moduleId: module.id,
    selector: 'app-pcp',
    template:`<div class="col s12" id='test'></div>`,   
  styleUrls: ['./pcpstyle.css'],
  encapsulation: ViewEncapsulation.None

})
export class PCPComponent implements OnInit {
//dimensions:any;
private dimensions: Array<string>;
//private d:any;

  constructor() { }

  ngOnInit() {
    this.drawChart();
  }

 drawChart() {
  var m = [100, 10, 10, 60],
  w = 1000 - m[1] - m[3],
  h = 300 - m[0] - m[2];

//var x = d3.scalePoint().range([0, w]).padding(.1),
var x= d3.scaleBand().rangeRound([0, w]),
  y = {},
  dragging = {};

var line = d3.line(),
  background,
  foreground;

var svg = d3.select("#test").append("svg:svg")
  .attr("width", w + m[1] + m[3])
  .attr("height", h + m[0] + m[2])
  .append("svg:g")
  .attr("transform", "translate(" + m[3] + "," + m[0] + ")");

var data = [{

  "A": 200, 
        "B": 3000, 
        "C": 2300, 
        "D": 4320, 
        "E": 1230, 
        "F": 7400, 
        "G": 1431, 
        "H": 1400, 
        "I": 4300, 
        "J": 6750
}, {

 "A": 1002, 
        "B": 2003, 
        "C": 2773, 
        "D": 3432, 
        "E": 1673, 
        "F": 740, 
        "G": 1231, 
        "H": 1900, 
        "I": 3000, 
        "J": 675
}];

// Extract the list of dimensions and create a scale for each.
x.domain(this.dimensions = d3.keys(data[0]).filter(function(d) {
  if (d === "name") return false;
  if (d === "Plant" || d === "Chemical" || d === "Pathway" || d === "Gene" || d === "Disease") {
    y[d] = d3.scaleOrdinal()
      .domain(data.map(function(p) {
        return p[d];
      }))
      .range([h, 0]);
  } else {
    y[d] = d3.scaleLinear()
      .domain(d3.extent(data, function(p) {
        return +p[d];
      }))
      .range([h, 0]);
  }
  return true;
}));

// Add grey background lines for context.
background = svg.append("svg:g")
  .attr("class", "background")
  .selectAll("path")
  .data(data)
  .enter().append("svg:path")
  .attr("d", path);

// Add blue foreground lines for focus.
foreground = svg.append("svg:g")
  .attr("class", "foreground")
  .selectAll("path")
  .data(data)
  .enter().append("svg:path")
  .attr("d", path);

// Add a group element for each dimension.
var g = svg.selectAll(".dimension")
  .data(this.dimensions)
  .enter().append("svg:g")
  .attr("class", "dimension")
  .attr("transform", function(d) {
    return "translate(" + x(d) + ")";
  }) 

// Add an axis and title.
g.append("svg:g")
  .attr("class", "axis")
  .each(function(d) {
    d3.select(this).call(d3.axisLeft(y[d]));
  })
  .append("svg:text")
  .attr("text-anchor", "middle")
  .attr("y", -50)
  .attr("x",-10)
  .text(String);

function position(d) {
  var v = dragging[d];
  return v == null ? x(d) : v;
}

function transition(g) {
  return g.transition().duration(500);
}

// Returns the path for a given data point.
function path(d) {
  return line(this.dimensions.map(function(p) {
    return [position(p), y[p](d[p])];
  }));
}
    }
}

集成此后，我得到以下提到的錯誤：

錯誤TypeError：無法讀取未定義的屬性“地圖”

需要更改什么才能使其正常工作？

Answer 1

罪魁禍首是path(d)方法，並在attr()方法中調用它：

.attr("d", path);

解

.attr("d", path.bind(this));

Answer 2

您也可以通過使用最新的JavaScript ES6箭頭功能來解決此錯誤。 箭頭函數表達式的語法比函數表達式短，並且沒有自己的this，arguments，super或new.target。

替代解決方案

path = (d) => {
  return line(this.dimensions.map(function(p) {
    return [position(p), y[p](d[p])];
  }));
}

Arrow函數沒有此參數，因此您無需綁定該方法。 您可以保留.attr("d", path); 。