I tried creating a bubblechart using D3 in Angular2 component. I want this
bubblechart to be loaded on click of menu. the Menu is built using the
Angular2 routing, the menu routing works fine for all the other menus
placed under it. Like any other menu I have linked the bubblechart
component also under it. But the problem I am facing is whenever I click
the bubblechart link, it internally creats a new DOM object. Assume If i
click the Bubblechart menu link 4 times, it internally creates 4 DOM object
for bubblechart chart. (Please find the HTML debugger code snapshot
<http://i.stack.imgur.com/9puzc.png> using F12 key in browser) But this is
not the expected behaviour what I am looking for. But for the other menus
it is not creating new DOM object, instead it replaces old one. Please find
the code for menu/routing component below
import {Component, bind} from 'angular2/core';import {ROUTER_PROVIDERS,
RouteConfig, ROUTER_DIRECTIVES, APP_BASE_HREF, LocationStrategy, RouteParams,
ROUTER_BINDINGS} from 'angular2/router';import {bootstrap} from
'angular2/platform/browser';
import {ComponentOne} from '../Dashboard/Dashboard1';import {ComponentTwo} from
'../Dashboard/Dashboard2';import {ReportOne} from '../Reports/Report1';import
{menutopbar} from './menutopbar';import {leftmenu} from './leftmenu';import
{BubbleChartComponent} from '../Charts/BubbleChartComponent';
@Component({
selector: 'comp-menu',
templateUrl: './Menu.html',
directives: [menutopbar, leftmenu, ROUTER_DIRECTIVES]})
@RouteConfig([
{ path: '/Dashboard1', name: 'ComponentOne', component: ComponentOne },
{ path: '/Dashboard2', name: 'ComponentTwo', component: ComponentTwo },
{ path: '/Report1', name: 'ReportOne', component: ReportOne },
{ path: '/BubbleChart', name: 'BubbleChart', component:
BubbleChartComponent}])
export class componentmenu {
constructor() {
console.log("componentmenu component being called");
}}
Please find the code for bubblechart chart below
import {Component} from 'angular2/core';
declare var d3: any;
@Component({
//selector: 'bubble-chart',
styles: [`
`],
//template: ``
templateUrl:'bubblechart.html'
})
export class BubbleChartComponent {
margin = 25;
diameter = 925;
color = d3.scale.linear()
.domain([-1, 5])
.range(["hsl(152,80%,80%)", "hsl(228,30%,40%)"])
.interpolate(d3.interpolateHcl);
pack = d3.layout.pack()
.padding(2)
.size([this.diameter - this.margin, this.diameter - this.margin])
.value(function (d) { return d.size; })
svg = d3.select("router-outlet").append("svg")
.attr("width", this.diameter)
.attr("height", this.diameter)
.append("g")
.attr("transform", "translate(" + this.diameter / 2 + "," +
this.diameter
/ 2 + ")");
chart = d3.json("flare.json", (error, root) => {
if (error) throw error;
var focus = root,
nodes = this.pack.nodes(root),
view;
var circle = this.svg.selectAll("circle")
.data(nodes)
.enter().append("circle")
.attr("class", function (d) { return d.parent ? d.children ?
"node" : "node node--leaf" : "node node--root"; })
.style("fill", (d) => { return d.children ? this.color(d.depth)
: null; })
.on("click", (d) => { if (focus !== d) zoom.call(this, d), d3.
event.stopPropagation(); });
var text = this.svg.selectAll("text")
.data(nodes)
.enter().append("text")
.attr("class", "label")
.style("fill-opacity", function (d) { return d.parent === root ?
1 : 0; })
.style("display", function (d) { return d.parent === root ?
"inline" : "none"; })
.text(function (d) { return d.name; });
var node = this.svg.selectAll("circle,text");
d3.select("router-outlet")
.style("background", this.color(-1))
.on("click", () => { zoom.call(this, root); });
zoomTo.call(this, [root.x, root.y, root.r * 2 + this.margin]);
function zoom(d) {
var focus0 = focus; focus = d;
var transition = d3.transition()
.duration(d3.event.altKey ? 7500 : 750)
.tween("zoom", (d) => {
var i = d3.interpolateZoom(view, [focus.x, focus.y,
focus.r * 2 + this.margin]);
return (t) => { zoomTo.call(this, i(t)); };
});
transition.selectAll("text")
.filter(function (d) { return d.parent === focus || this.
style.display === "inline"; })
.style("fill-opacity", function (d) { return d.parent ===
focus ? 1 : 0; })
.each("start", function (d) { if (d.parent === focus) this.
style.display = "inline"; })
.each("end", function (d) { if (d.parent !== focus) this.
style.display = "none"; });
}
function zoomTo(v) {
var k = this.diameter / v[2]; view = v;
node.attr("transform", function (d) { return "translate(" + (d.x
- v[0]) * k + "," + (d.y - v[1]) * k + ")"; });
circle.attr("r", function (d) { return d.r * k; });
}
});
}
My requirement is: When ever the user clicks on the "BubbleChart" link
provided in the menu, only one D3 bubble chart should be displayed at that
time. If the user is clicking on the Bubblechart menu link again the
previous chart should be refershed again with new data by calling the
appropriate components.
--
You received this message because you are subscribed to the Google Groups
"AngularJS" 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.
