Monaca/Onsen 2.0 - Библиотеки диаграмм не работают (SVG и Canvas) в <ons-navigator>

Question

Итак, я последовал этому руководству: https://onsen.io/blog/charts-angularjs-hybrid-app-nvd3/, и я не могу получить графики для рендеринга в эмуляторе или на устройстве через отладчик. Я пробовал Charts.JS, а также NVD3 без успеха. По этому вопросу я пытаюсь использовать NVD3. Мой код выглядит следующим образом:

index.html - голова:

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script> 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css"> 
<script src="lib/js/D3_Chart.js"></script> 

Index.html - тело:

<ons-template id="gameon.html"> 
    <ons-page> 
     <ons-toolbar> 
      <div class="center">Game On!</div> 
     </ons-toolbar> 
     <ons-navigator id="gameNavigator"> 
      <ons-page> 
       <ons-list modifier="inset"> 
        <ons-list-item modifier="chevron">Page 1</ons-list-item> 
        <ons-list-item modifier="chevron">Page 2</ons-list-item> 
       </ons-list>      
       <ons-button>Above Chart</ons-button> 
       <div id='chart2'> 
        <svg> </svg> 
       </div> 
       <ons-button>Below Chart</ons-button> 
      </ons-page> 
     </ons-navigator> 
    </ons-page> 
</ons-template> 

D3_Chart.js:

nv.addGraph(function() { 
    var chart = nv.models.pieChart() 
     .x(function(d) { return d.label }) 
     .y(function(d) { return d.value }) 
     .showLabels(true)  //Display pie labels 
     .labelThreshold(.05) //Configure the minimum slice size for labels to show up 
     .labelType("percent") //Configure what type of data to show in the label. Can be "key", "value" or "percent" 
     .donut(true)   //Turn on Donut mode. Makes pie chart look tasty! 
     .donutRatio(0.35)  //Configure how big you want the donut hole size to be. 
     ; 

    d3.select("#chart2 svg") 
     .datum(exampleData()) 
     .transition().duration(350) 
     .call(chart); 

    return chart; 
}); 

//Pie chart example data. Note how there is only a single array of key-value pairs. 
function exampleData() { 
    return [ 
     { 
     "label": "One", 
     "value" : 29.765957771107 
     } , 
     { 
     "label": "Two", 
     "value" : 0 
     } , 
     { 
     "label": "Three", 
     "value" : 32.807804682612 
     } , 
     { 
     "label": "Four", 
     "value" : 196.45946739256 
     } , 
     { 
     "label": "Five", 
     "value" : 0.19434030906893 
     } , 
     { 
     "label": "Six", 
     "value" : 98.079782601442 
     } , 
     { 
     "label": "Seven", 
     "value" : 13.925743130903 
     } , 
     { 
     "label": "Eight", 
     "value" : 5.1387322875705 
     } 
    ]; 
} 

Я пытался различный синтаксис данных, потому что пример имеет несколько разных форм, но все они не генерируют диаграмму. Я не использую AngularJS.

Я подтвердил, что этот код работает в Chrome и в браузере по умолчанию на Android, но не на Monaca. Кроме того, я беспокоился о проблемах с доменом, поэтому я также попробовал с загруженными и добавленными в проект ссылками файлы JS и CSS. Ошибок не генерируется, только диаграмма не отображается.

Редактировать: Обновлено, чтобы явно показывать теги <ons>, как указано ниже. Дело в том, что код отлично работает в браузере Chrome и Android (я бы предположил, что iOS также просто не имеет доступа к тесту), но он не может выполняться в проекте Monaca/Onsen 2.0. Код из блога Onsen, который заставляет меня задаться вопросом, нарушает ли эта функция 2.0.

Ответ: Как я уже писал в комментарии ниже, проблема не в Onsen, а в том, как/когда объекты добавляются в DOM. Это сообщение содержит особенности: Onsen 2.0 - Adding event listener to Ons-Switch with Javascript

Answer 1

Я нашел это еще один пост:

document.addEventListener("init", function(event) { 
    if (event.target.id == "my-page") { 
    document.getElementById("my-switch").addEventListener('change', function(e) { 
     console.log('click', e); 
    }); 
    } 
}, false);