將D3圖表定位在包裹在指定位置的問題angular2

Question

我在定位圖表和更改氣泡圖表中圓圈的顏色時遇到了一些問題。我需要通過消費一些json內容來繪製包裹在angular2組件中的氣泡圖。我在指定空間/地區內定位圖表時遇到了一些問題。

請參考快照了解應用程序的佈局。在基於某些用戶點擊事件的應用程序中，氣泡圖應該在下方加載，但目前它正在加載到頁面下方，即在整個頁面佈局下方。該氣泡圖表配置在angular2路由，並預計在指定的路由器出口標籤被加載，但加載之外的

注： 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

圖表I中發現的溶液THI問題。由於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 + ")");