0
Я попытался создать пузырьковую диаграмму, используя компонент D3 в компоненте Angular2. Но я сталкиваюсь с некоторыми проблемами в его создании. Не уверен, в чем ошибка. Пожалуйста, найдите plunkr URL https://plnkr.co/edit/eTi58RL5gipHUseAT9GA для кода. Может ли кто-нибудь помочь мне в этом?Проблема при создании пузырьковой диаграммы с использованием D3 в Angular2
код, чтобы создать диаграмму в D3 с angular2
import {Component, View, Directive, Input, Output, Inject, Injectable, provide} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass, Control, ControlGroup, FormBuilder, Validators} from 'angular2/common';
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, Router, LocationStrategy, HashLocationStrategy} from 'angular2/router';
import {Http, HTTP_PROVIDERS, RequestOptions, Headers, Request, RequestMethod} from 'angular2/http'
//Declaratives for d3 and 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 i = 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");
}
Можете ли вы описать, что ваши «проблемы» являются? И, пожалуйста, прочитайте [this] (stackoverflow.com/help/how-to-ask). –