1

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?

6
  • @JamesZ :Can you plz help me to identified where i am doing wrong?
    – sam140
    Nov 11, 2017 at 18:43
  • Please read this
    – James Z
    Nov 11, 2017 at 18:46
  • Did you really open a duplicate question an hour later as a different user? Just bad form man...
    – Mark
    Nov 11, 2017 at 19:51
  • no i didn't open duplicate
    – sam140
    Nov 11, 2017 at 20:19
  • @sam140, decided to remove my answers. Can't quite shake the feeling that you are not being truthful about duplicate questions.
    – Mark
    Nov 11, 2017 at 20:42

2 Answers 2

0

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

.attr("d", path);

Solution

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

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);.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.