将 D3 图表定位在 angular2 包裹的指定位置时出现问题

Question

我在定位图表和更改气泡图中圆圈的颜色时遇到了一些问题。我需要通过消耗一些 json 内容来绘制一个包裹在 angular2 组件中的气泡图。我在指定空间/区域内定位图表时遇到了一些问题。

请参阅应用程序布局的快照。在基于一些用户点击事件的应用程序中，气泡图应该加载到正下方，但目前它是在页面下方加载方式，即在整个页面布局下方。此气泡图配置了 angular2 中的路由，预计将加载到指定的 router-outlet 标记中，但在

之外加载

注意： 1. D3.js 用于绘制气泡图，封装在 angular2 组件中。 2. 我尝试减小图表组件的宽度和高度，但仍然没有渲染到想要的位置。

应在其中呈现图表的 HTML

<div class="container" style="overflow:scroll; height:100%; width:100%;">
    <h2>Redis Administration</h2>
    <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#ExtractorQueue" [routerLink]="['./']">ExtractorQueue</a></li>
        <li><a data-toggle="tab" href="#Extractor" [routerLink]="['Extractor']">Extractor</a></li>
        <li><a data-toggle="tab" href="#Schedule" [routerLink]="['Schedule']">Schedule</a></li>
        <li><a data-toggle="tab" href="#CacheVisualization" [routerLink]="['CacheVisualization']">Cache Visualization</a></li>
    </ul>
    <div class="tab-content">
        <router-outlet></router-outlet>
    </div>
</div>

D3 封装在 angular2 组件代码中

import { Component, ViewEncapsulation } from '@angular/core';
import { HTTP_PROVIDERS, Http } from '@angular/http';
import { Configuration } from '../Configuration/Configuration';

declare var d3: any;

@Component({
    selector: 'bubble-chart',
    styleUrls: ['css/BubbleChart.css'],
    providers: [Configuration, HTTP_PROVIDERS],
    template: ``,
    encapsulation: ViewEncapsulation.None 
})
export class BubbleChart {
    public resultData: any;
    public chartData: any;
    margin = 5;
    diameter = 660;

    constructor(private _Configuration: Configuration) {
        console.log("In constructor of BubbleChartComponent");
        this.DrawBubbleChart();
    }

    private DrawBubbleChart(): void {
        console.log("Inside DrawBubbleChart in BubbleChartComponent");
        //console.log(this.resultData);

        var color = d3.scale.linear()
            .domain([-1, 5])
            .range(["hsl(152,80%,80%)", "hsl(228,30%,40%)"])
            .interpolate(d3.interpolateHcl);

        var pack = d3.layout.pack()
            .padding(2)
            .size([this.diameter - this.margin, this.diameter - this.margin])
            .value(function (d) { return d.size; })

        var 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 + ")");

        var chart = d3.json(this._Configuration.BLUESKYDATACACHEAPI_GETEXTRACTORQUEUESLATEST, (error, root) => {
            if (error) throw error;

            var focus = root,
                nodes = pack.nodes(root),
                view;

            var circle = 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 ? color(d.depth) : null; })
                .on("click", (d) => { if (focus !== d) zoom.call(this, d), d3.event.stopPropagation(); });

            var text = 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 = svg.selectAll("circle,text");

            d3.select("body")
                .style("background", "white")
                //.style("background", 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; });
            }//end zoomTo

        });//end chart

    }//end DrawBubbleChart

}

Answer 1

我找到了解决这个问题的方法。由于D3沿着远离指定位置生成svg标签，所以最好使用nativeElement强制D3在指定位置生成图表。通过这种方式，我们强制 D3 在放置在特定位置的指定 DOM 元素中生成

  var svg = d3.select(this.el.nativeElement).append("svg")
            .attr("width", (this.diameter + 800))
            .attr("height", this.diameter)
            .attr('id', 'mySVG')
            .append("g")
            .attr("transform", "translate(" + this.diameter / 2 + "," + this.diameter / 2 + ")");