遗漏的类型错误：无法读取空

问题描述：

的特性“追加”我重建了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); 
});

答

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

的链接调用第一下拉框所以我改成

var innerContainer = document.getElementById('bubble1')

，它检索来自第二组的相同的正确数据我在HTML中创建了'bubble1'id以区分两者后的数据。

遗漏的类型错误：无法读取空

相关推荐