D3图表与Angular 4的集成

Question

I am using D3 charting library to create parallel coordinates visualization chart in my Angular 4 application and i have already installed npm package of D3 in my application. D3 version is 4 Following is what I am trying.

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])];
  }));
}
    }
}

After the integration of this i am getting below mentioned error:

ERROR TypeError: Cannot read property 'map' of undefined

What needs to be changed so this could work properly?

Answer 1

the culprit for this is path(d) method And calling it inside the attr() method:

.attr("d", path);

Solution

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

Answer 2

You can solve this error by using latest JavaScript ES6 arrow function as well. An arrow function expression has a shorter syntax than a function expression and does not have its own this, arguments, super, or new.target.

Alternative Solution

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

Arrow function does not have this argument, so that you don't need to bind the method. You can keep .attr("d", path); .