在 ng-bootstrap 中的 NgbAccordion 中添加 D3.js v4 图

Question

我正在使用 Angular (TypeScript) 以及 d3.js v4 （版本 4.13）和 ng-bootstrap.

d3-component.html

<div class="container-fluid">
<div class="row">
<div class="col-lg">
<ngb-accordion #acc="ngbAccordion"
    activeIds="ngb-panel-0, ngb-panel-1" id="accordion">
  <ngb-panel title="State Tracking View">
    <ng-template ngbPanelContent>
      <div id="svg1">
      </div>
    </ng-template>
  </ngb-panel>
  <ngb-panel title="Schedule Tracking View">
    <ng-template ngbPanelContent>
      <div id="svg2"></div>
      </ng-template>
    </ngb-panel>
  </ngb-accordion>
 </div>
</div>
</div>

我想在 ng-template.

的两个 div 组件中添加一些 svg

我刚刚从 Mike Bostock 那里得到了一个代码，并试图将它显示在手风琴的一个面板中

d3-component.ts

  ngOnInit() {
    console.log('d3 version ', d3['version']);
    this.loadPiGraph();
  }

  loadPiGraph() { // loading the Extending Arcs graph from Bostock

    var data = [1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89];

    var width = 960, // some random values for now!
        height = 500;

    var outerRadius = height / 2 - 20,
        innerRadius = outerRadius / 3,
        cornerRadius = 10;

    var pie = d3.pie()
        .padAngle(.02);

    var arc = d3.arc()
        .padRadius(outerRadius)
        .innerRadius(innerRadius);
    /*
       HOW DO I SELECT THE DIVS AND ADD THE GRAPH IN IT?
    */
    var svg = d3.select('ngb-accordion')
    .select('#svg1').append('svg')
        .attr("width", width)
        .attr("height", height)
      .append("g")
        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    svg.selectAll("path")
        .data(pie(data))
      .enter().append("path")
        .each(function(d) { d.outerRadius = outerRadius - 20; })
        .attr("d", arc)
        .on("mouseover",() => {
          arcTween(outerRadius, 0);
          AddNode();
        } )
        .on("mouseout", arcTween(outerRadius - 20, 150));

    function arcTween(outerRadius, delay) {
      return function() {
        d3.select(this).transition().delay(delay).attrTween("d", function(d) {
          var i = d3.interpolate(d.outerRadius, outerRadius);
          return function(t) { d.outerRadius = i(t); return arc(d); };
        });
      };
    }

    function AddNode() {
      d3.select('#svg2').append('circle')
      .attr('cx', 30)
      .attr('cy', 40)
      .attr('r', 24)
      .style('fill', 'blue')
      .transition()
      .duration(2000)
      .attr('cx', 340);
    }
  }

观察结果

我几乎什么都不做。我使用了浏览器检查器，但没有插入 <svg> 标签，证明 d3.select() 没有被我正确编程。

但是如果我这样做 d3.select('body') 它会在手风琴的底部添加图表。

我不确定如何选择手风琴面板

Answer 1

好的，我找到了答案：

所有面板的默认 activeIds ngb-panel-0 为我创造了技巧。

正如@pmkro 在评论中所建议的那样，我使用了手风琴的 id，然后如上所述使用面板的 id 来获得渲染

代码片段

var svg = d3.select('#accordion')
        .select('#ngb-panel-0') // this gets the selection
        .append('svg')
        .attr("width", width)
        .attr("height", height)
      .append("g")
        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

在 ng-bootstrap 中的 NgbAccordion 中添加 D3.js v4 图

Add D3.js v4 graph within a NgbAccordion in ng-bootstrap

d3.js

ng-bootstrap

angular

d3-component.html

d3-component.ts

观察结果

代码片段

结果