遺漏的類型錯誤：無法讀取空

的特性「追加」我重建了ploytly.js下拉圖表這裏：遺漏的類型錯誤：無法讀取空

https://plot.ly/javascript/dropdowns/#bind-dropdown-events-to-plotlyjs-charts

我複製和我的應用程序粘貼代碼，它完美地工作。

現在我只是想複製圖表，並把它放在原來的。下面是HTML：

<div class="showcase__section" id="bubble"> 
    <div class="spacer --small"></div> 
    <div id="bubbleplots"> 
    <div class="bubbleplot" data-num="0"> 
     <div class="plot" id="plotdiv"></div> 
     <div class="control-row"> 
     Country: <select class="countrydata"> 
     </select> 
     </div> 
    </div> 
    </div> 
</div> 

<div class="showcase__section" id="bubble"> 
    <div class="spacer --small"></div> 
    <div id="bubbleplots"> 
    <div class="bubbleplot" data-num="0"> 
     <div class="plot1" id="plotdiv1"></div> 
     <div class="control-row"> 
     Country: <select class="countrydata1"> 
     </select> 
     </div> 
    </div> 
    </div>

我改變的div的3這樣的JavaScript可以告訴他們分開。

以下是javascript。再一次，我改變了第二個圖的一些變量的名字。否則，第一個和第二個圖的JavaScript是相同的。

第一張圖在我的應用程序中完美呈現，但第二張圖存在問題。第二張圖顯示，數據在圖上是正確的，彈出菜單顯示，但沒有國家名稱。我在三個不同時間的第二個圖的console.log（'currentOption1'）。控制檯的前兩次按預期方式返回，但第三次顯示'Uncaught TypeError：無法讀取'null'屬性'追加'。所以，問題在於

selector.appendChild(currentOption1);

再次，

selector.appendChild(currentOption);

作品完美地與第一張圖。

因此currentOption1爲空。爲什麼，以及如何解決它？

這裏是將two graphs

Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv', function(err, rows){ 

    function unpack(rows, key) { 
     return rows.map(function(row) { return row[key]; }); 
    } 

var allCountryNames = unpack(rows, 'country'), 
    allYear = unpack(rows, 'year'), 
    allGdp = unpack(rows, 'gdpPercap'), 
    listofCountries = [], 
    currentCountry, 
    currentGdp = [], 
    currentYear = []; 

    for (var i = 0; i < allCountryNames.length; i++){ 
    if (listofCountries.indexOf(allCountryNames[i]) === -1){ 
     listofCountries.push(allCountryNames[i]); 
    } 
    } 

    function getCountryData(chosenCountry) { 
    currentGdp = []; 
    currentYear = []; 
    for (var i = 0 ; i < allCountryNames.length ; i++){ 
     if (allCountryNames[i] === chosenCountry) { 
     currentGdp.push(allGdp[i]); 
     currentYear.push(allYear[i]); 
     } 
    } 
    }; 

// Default Country Data 
setBubblePlot('Afghanistan'); 

function setBubblePlot(chosenCountry) { 
    getCountryData(chosenCountry); 

    var trace1 = { 
     x: currentYear, 
     y: currentGdp, 
     mode: 'lines+markers', 
     marker: { 
     size: 12, 
     opacity: 0.5 
     } 
    }; 

var data = [trace1]; 

var layout = { 
    title: 'GDP per cap according to Country<br>'+ chosenCountry + ' GDP' 
}; 

    Plotly.newPlot('plotdiv', data, layout); 
}; 

var innerContainer = document.querySelector('[data-num="0"'), 
    plotEl = innerContainer.querySelector('.plot'), 
    countrySelector = innerContainer.querySelector('.countrydata'); 

function assignOptions(textArray, selector) { 
    for (var i = 0; i < textArray.length; i++) { 
     var currentOption = document.createElement('option'); 
     currentOption.text = textArray[i]; 
     selector.appendChild(currentOption); 
    } 
} 

assignOptions(listofCountries, countrySelector); 

function updateCountry(){ 
    setBubblePlot(countrySelector.value); 
} 

countrySelector.addEventListener('change', updateCountry, false); 
}); 


Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv', function(err, rows){ 

    function unpack(rows, key) { 
     return rows.map(function(row) { return row[key]; }); 
    } 

var allCountryNames = unpack(rows, 'country'), 
    allYear = unpack(rows, 'year'), 
    allGdp = unpack(rows, 'gdpPercap'), 
    listofCountries = [], 
    currentCountry, 
    currentGdp = [], 
    currentYear = []; 

    for (var i = 0; i < allCountryNames.length; i++){ 
    if (listofCountries.indexOf(allCountryNames[i]) === -1){ 
     listofCountries.push(allCountryNames[i]); 
    } 
    } 

    function getCountryData(chosenCountry) { 
    currentGdp = []; 
    currentYear = []; 
    for (var i = 0 ; i < allCountryNames.length ; i++){ 
     if (allCountryNames[i] === chosenCountry) { 
     currentGdp.push(allGdp[i]); 
     currentYear.push(allYear[i]); 
     } 
    } 
    }; 

// Default Country Data 
setBubblePlot('Brazil'); 

function setBubblePlot(chosenCountry) { 
    getCountryData(chosenCountry); 

    var trace1 = { 
     x: currentYear, 
     y: currentGdp, 
     mode: 'lines+markers', 
     marker: { 
     size: 12, 
     opacity: 0.5 
     } 
    }; 

    var data = [trace1]; 

    var layout = { 
     title: 'GDP per cap according to Country<br>'+ chosenCountry + ' GDP' 
    }; 

    Plotly.newPlot('plotdiv1', data, layout); 
}; 

var innerContainer = document.querySelector('[data-num="0"'), 
    plotEl = innerContainer.querySelector('.plot1'), 
    countrySelector = innerContainer.querySelector('.countrydata1'); 

function assignOptions(textArray, selector) { 
    for (var i = 0; i < textArray.length; i++) { 
     var currentOption1 = document.createElement('option'); 
     console.log('currentOption1') 
     currentOption1.text = textArray[i]; 
     console.log('currentOption1') 
     selector.appendChild(currentOption1); 
     console.log('currentOption1') 
    } 
} 

assignOptions(listofCountries, countrySelector); 

function updateCountry(){ 
    setBubblePlot(countrySelector.value); 
} 

countrySelector.addEventListener('change', updateCountry, false); 
});

來源

2016-08-21 James Fallon

var innerContainer = document.querySelector('[data-num="0"')

的鏈接調用第一下拉框所以我改成

var innerContainer = document.getElementById('bubble1')

，它檢索來自第二組的相同的正確數據我在HTML中創建了'bubble1'id以區分兩者後的數據。

來源

2016-08-23 00:39:35

遺漏的類型錯誤：無法讀取空

回答

相關問題