i tried creating bubblechart using d3 in angular2 component. facing issues in generating it. not sure mistake. please find plunkr url https://plnkr.co/edit/eti58rl5giphuseat9ga code. can 1 me on this?
code generate chart in d3 angular2
import {component, view, directive, input, output, inject, injectable, provide} 'angular2/core'; import {bootstrap} 'angular2/platform/browser'; import {core_directives, form_directives, ngclass, control, controlgroup, formbuilder, validators} 'angular2/common'; import {routeconfig, router_directives, router_providers, router, locationstrategy, hashlocationstrategy} 'angular2/router'; import {http, http_providers, requestoptions, headers, request, requestmethod} 'angular2/http' //declaratives d3 , linq declare var d3: any; declare var enumerable: any; declare var c3: any; @component({ selector: 'bubble-chart', template: `<!doctype html> <meta charset="utf-8"> <style> .node { cursor: pointer; } .node:hover { stroke: #000; stroke-width: 1.5px; } .node--leaf { fill: white; } .label { font: 11px "helvetica neue", helvetica, arial, sans-serif; text-anchor: middle; text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff; } .label, .node--root, .node--leaf { pointer-events: none; } </style> <body> <script src="//d3js.org/d3.v3.min.js"></script>` }) export class bubblechartcomponent { constructor() { } margin = 20; diameter = 960; 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("body").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", function (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", function (d) { return d.children ? this.color(d.depth) : null; }) .on("click", function (d) { if (focus !== d) zoom(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("body") .style("background", this.color(-1)) .on("click", function () { zoom(root); }); zoomto([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", function (d) { var = d3.interpolatezoom(view, [focus.x, focus.y, focus.r * 2 + this.margin]); return function (t) { zoomto(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; }); } }); chart1 = d3.select(self.frameelement).style("height", this.diameter + "px"); // d3.select(this.self.frameelement).style("height", this.diameter + "px"); }
well have lot of mistakes related current context this.
you can see working plunkr @ page https://embed.plnkr.co/qm3qrk3swvalqfbh1db1/
