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
This is may be occurring due to this.dimensions in empty.But i am unable to
understand where i am doing mistake.So can any one suggest me where i am
doing wrong that really help me to resolve my problem
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
