在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>

我想在svg中的两个div组件中添加一些ng-template。

我刚刚从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

好的，我找到了答案：

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

正如@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 + ")");

结果