Ошибка отображается на моей главной. js строка 14. Я попытался обработать ошибки с нулевым | неопределенным. Это приводит меня к новой ошибке с моей getOptions функцией в index.html строке 10. Карта представляет графства Калифорния. Когда дата выбрана, данные фильтруются по этой дате. Округа показывают данные для этого округа, когда зависли. Информационное окно показывает, не имеет информации. Округ выбран, как показано в консоли. Если кто-то может направить меня в правильном направлении, чтобы получить информационное окно для заполнения данных, это будет с благодарностью.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="main.css" />
<title>COV19 California</title>
</head>
<body>
<label>
<strong>Select date</strong>
</label>
<label for="myList" />
<select id="myList" onchange="getOption()">
<option value="2020-01-21">January 21, 2020</option>
<option value="2020-01-22">January 22, 2020</option>
<option value="2020-01-23">January 23, 2020</option>
</select>
<p>
California Cov19 data for
<span class="output" />
</p>
<p>
<small>
<strong>Note:</strong>
Data is not updated in 'real-time'
</small>
</p>
<div id="info-box" />
<svg xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://web.resource.org/cc/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:ns="http://ns.adobe.com/Variables/1.0/" xmlns:ns0="http://ns.adobe.com/SaveForWeb/1.0/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg" xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:xap="http://ns.adobe.com/xap/1.0/" xmlns:xapGImg="http://ns.adobe.com/xap/1.0/g/img/" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="ca-map" sodipodi:docbase="d:\Home\Wikipedia" sodipodi:docname="California county map.svg" inkscape:version="0.44" sodipodi:version="0.32" x="0px" y="0px" width="620.843px" height="733.026px" viewBox="0 0 620.843 733.026" enable-background="new 0 0 620.843 733.026" xml:space="preserve">
<sodipodi:namedview bordercolor="#666666" objecttolerance="10" pagecolor="#ffffff" borderopacity="1" gridtolerance="10" guidetolerance="10" inkscape:cx="509.19152" inkscape:cy="282.2353" inkscape:zoom="1.2137643" showgrid="false" id="namedview71" inkscape:current-layer="g5" inkscape:window-maximized="1" inkscape:window-y="-8" inkscape:window-x="-8" inkscape:pageopacity="0" inkscape:window-height="1017" inkscape:window-width="1920" inkscape:pageshadow="2">
</sodipodi:namedview>
<g id="g5">
<path id="Alameda" fill="#CCCCCC" stroke="#FFFFFF" stroke-miterlimit="1" d="M160.354,327.507 160.446,327.867 160.371,329.095 160.464,329.46 160.166,329.92 160.457,331.061 160.097,331.152 160.188,331.512 160.38,332.262 160.186,333.111 160.278,333.471 160.37,333.831 160.028,335.516 160.221,336.271 160.136,339.068 159.954,341.485 159.972,343.079 160.154,345.402 159.98,346.24 160.071,348.205 159.803,348.656 160.262,348.954 160.354,349.314 160.445,349.674 160.831,349.576 161.679,349.776 161.771,350.136 162.136,350.042 162.984,350.243 163.343,350.151 163.435,350.51 163.075,350.602 163.168,350.967 163.528,350.875 163.626,351.261 163.36,351.718 163.817,352.011 164.208,351.912 164.3,352.277 164.66,352.186 164.752,352.545 164.85,352.93 165.214,352.837 164.67,353.786 142.229,352.752 140.756,353.128 140.847,353.487 140.462,353.585 140.562,353.975 140.197,354.068 140.098,353.678 139.713,353.777 139.812,354.167 137.955,354.64 138.046,355 137.682,355.093 137.59,354.733 137.23,354.825 137.131,354.435 136.741,354.534 136.65,354.174 136.55,353.784 136.19,353.875 136.29,354.266 134.791,354.648 132.941,353.521 130.886,353.246 130.125,351.869 129.093,350.95 128.734,351.042 127.886,350.846 126.669,347.599 125.157,344.793 124.671,341.364 124.847,338.923 123.34,336.143 122.24,334.852 121.002,334.757 120.81,334.002 119.903,333.466 120.167,332.982 120.076,332.623 121.667,332.601 121.934,332.149 121.475,331.851 117.911,330.394 114.947,329.551 114.473,327.691 114.913,326.391 116.222,325.264 116.396,324.448 116.403,322.847 116.02,321.347 115.447,320.726 115.348,320.336 115.737,320.236 116.097,320.145 116.482,320.047 116.582,320.437 116.946,320.344 117.305,320.252 117.206,319.862 117.596,319.763 117.956,319.671 118.055,320.061 118.445,319.961 118.537,320.322 118.628,320.682 118.988,320.59 119.087,320.981 119.179,321.34 119.278,321.73 119.643,321.638 120.027,321.54 120.119,321.9 120.484,321.807 120.576,322.167 121.06,322.459 121.152,322.824 120.769,322.922 120.958,323.667 121.343,323.569 121.436,323.935 121.801,323.842 121.9,324.231 121.991,324.586 122.09,324.977 122.449,324.886 122.541,325.246 122.926,325.147 123.019,325.513 122.634,325.611 122.732,325.996 122.825,326.361 122.923,326.746 123.309,326.648 123.401,327.013 123.766,326.92 124.515,326.729 124.971,326.996 125.071,327.387 125.163,327.747 125.548,327.648 125.647,328.039 126.007,327.948 126.842,328.118 127.207,328.025 127.597,327.925 128.433,328.095 128.797,328.002 129.646,328.202 130.099,328.476 130.849,328.285 131.403,328.937 131.787,328.838 131.879,329.199 132.344,329.496 132.819,329.757 133.462,330.777 133.926,331.074 132.911,331.722 133.101,332.466 133.678,333.125 134.037,333.033 134.129,333.393 134.591,333.685 134.977,333.586 135.07,333.952 135.434,333.859 136.009,334.506 146.778,331.762 148.537,330.902 157.833,328.533 157.741,328.173 160.354,327.507 " />
<polygon fill="#CCCCCC" stroke="#FFFFFF" stroke-miterlimit="1" points="281.586,484.949 282.063,447.961 285.232,447.938 285.361,437.587 281.807,437.708 282.057,430.913 279.389,431.183 273.529,436.253 272.614,435.686 268.508,436.733 268.34,437.575 255.674,437.639 255.677,454.678 233.706,475.732 236.108,475.906 238.187,477.766 238.473,478.889 237.163,480.041 237.637,481.902 239.324,482.227 239.986,484.826 " />
</g>
</svg>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.0/d3.js" />
<script src="data.js" />
<script src="main.js" />
</body>
</html>
$("path, circle").hover(function(e) {
// make tooltip visible
$('#info-box').css('display','block');
// get date from selector element
const date = document.querySelector('#myList').value;
// filter the `data` array for counties just in that date
const filtered = data.filter(d => d.Date == date);
// filter counties of that date to just the one county matching the id of
// the path that is being hovered on
const county = filtered.filter(d => d.id == $(this).attr('id'))[0];
// create the html string to populate the tooltip with
// as long as the key isn't 'id' then continue building
let county_html = '';
Object.entries(county).forEach(([key, value]) => {
if (key != 'id') {
county_html += `${key}: ${value}<br>`;
}
})
// change value of tooltip to html we just made
$('#info-box').html(county_html);
});
$("path, circle").mouseleave(function(e) {
$('#info-box').css('display','none');
});
$(document).mousemove(function(e) {
$('#info-box').css('top',e.pageY-$('#info-box').height()-30);
$('#info-box').css('left',e.pageX-($('#info-box').width())/2);
}).mouseover();
var ios = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if(ios) {
$('a').on('click touchend', function() {
var link = $(this).attr('href');
window.open(link,'_blank');
return false;
});
}
function getOption() {
const selectElement = document.querySelector('#myList');
output = selectElement.value;
document.querySelector('.output').textContent = output;
}
const data = [{
county: "Alameda",
date: "2020-01-21",
id: "Alameda",
state: "California",
cases: "",
deaths: ""
},
{
county: "Alpine",
date: "2020-01-21",
id: "Alpine",
state: "California",
cases: "",
deaths: ""
},
{
county: "Amador",
date: "2020-01-21",
id: "Amador",
state: "California",
cases: "",
deaths: ""
},
{
county: "Butte",
date: "2020-01-21",
id: "Butte",
state: "California",
cases: "",
deaths: ""
},
{
county: "Calaveras",
date: "2020-01-21",
id: "Calaveras",
state: "California",
cases: "",
deaths: ""
},
{
county: "Colusa",
date: "2020-01-21",
id: "Colusa",
state: "California",
cases: "",
deaths: ""
},