D3.jsとIonic 2：2番目のページビューのDOMにない要素

Question

d3.jsの統合をテストするための簡単なIonicアプリケーションを作成しました。ここで見つけることができます： https://github.com/wberger/ionic2-d3js-test

次のように私は統合をした：

1. はメニューにhome.htmlを追加サイド・ナビゲーションとアプリとシングルページ（home.html）
2. を作成します。 index.htmlをで
3. ロードd3.js： <script src="https://d3js.org/d3.v4.min.js"></script>
4. home.html
5. に<div id="chart"></div>を追加し、次のようにhomeテンプレート（source）に定義されて

   home.ts

に ngAfterViewInit()でグラフを作成します。

<ion-header> 
    <ion-navbar> 
    <button menuToggle> 
     <ion-icon name="menu"></ion-icon> 
    </button> 
    <ion-title> 
     Ionic Blank 
    </ion-title> 
    </ion-navbar> 
</ion-header> 

<ion-content padding> 
    The world is your oyster. 
    <p> 
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide. 
    </p> 
    <div id="chart"></div> 
    <p>After</p> 
</ion-content> 

グラフcreat次のようにイオンは、（source）実装されている：

ngAfterViewInit() { 
    this.createChart(); 
    } 

    createChart() { 
    var chart = d3.select("#chart").append("svg") 
     .attr("width", 100) 
     .attr("height", 100) 
     .append("g"); 

    var rows = [ 
     {x: 1, y: 1}, 
     {x: 2, y: 2}, 
     {x: 3, y: 3}, 
    ]; 

    var xScale = d3.scaleLinear() 
      .range([0, 100]) 
      .domain([1, 3]); 
    var yScale = d3.scaleLinear() 
      .range([100, 0]) 
      .domain([1, 3]); 

    chart.selectAll(".dot") 
     .data(rows) 
     .enter().append("circle") 
     .attr("class", "dot") 
     .attr("cx", (row) => { return xScale(row.x) }) 
     .attr("cy", (row) => { return yScale(row.y) }) 
     .attr("r", 3.5); 
    } 

アプリを起動すると、チャートが意図したとおりに表示されています。しかし、サイドメニューから（再）ページを開くと、グラフは表示されません。

• ngAfterViewInit()以前に作成したSVG要素がまだそこにある
• 「）createChart（」と呼ばれ、順番に呼び出しを取得します：Google ChromeでTS/DOMを検査するとき、私は再開口は、次の行動を観察することができます
• 第SVG要素
が作成SVGがなくなっている ngAfterViewInit()後 createChart()

によって作成され、充填されています。 DOMは空の（またはキャッシュされた）テンプレートに置き換えられているようです。

だから私の質問は以下のとおりです。

• ここでうまくいきませんか？私は何を知るべきですか？
• どうすれば修正できますか？

Answer 1

私はコンポーネントとして、チャートを構築することにより、この問題を解決：

@Component({ 
    selector: 'my-chart', 
    inputs: ['options', 'data'], 
    template: `` 
}) 
export class MyChart implements OnChanges { 

    el: any; 
    options: MyChartOptions; 
    data: MyChartData; 

    chart: any; 
    arcMap: any; 

    /** 
    * Initializes the component with the root element. 
    */ 
    constructor(@Inject(ElementRef) elementRef: ElementRef) { 
    this.el = elementRef.nativeElement; 
    } 

    /** 
    * Handler for binding changes. 
    * @param changes The changed bound values. 
    */ 
    ngOnChanges(changes) { 
    if (changes.options) { 
     this.updateWithOptions(this.options); 
    } 

    if (changes.data) { 
     this.updateWithData(this.data); 
    } 
    } 

    // handlers, drawing etc. ... 
} 

次のようにそれは、その後統合することができます。

<my-chart [data]="chartData" [options]="chartOptions"></my-chart> 

はapp.module.tsでコンポーネントを登録することを忘れないでください。例：

import { MyChart } from '../components/charts/my-chart'; 

// ... 

@NgModule({ 
    declarations: [ 
    // ... 
    MyChart 
    ], 
    imports: [ 
    // ... 
    ], 
    bootstrap: [MyApp], 
    entryComponents: [ 
    // ... 
    ], 
    providers: [ 
    // ... 
    ] 
})