js var不会获得document.getElementById().value的值
我正在研究具有输入范围元素的D3饼图,以动态生成应确定饼图的值。
如果我在app.js中添加
var selectedyear
手动手动(var selectedyear = 1967
)饼图工作- 如果我 通过
getElementById
方法,例如(var selectedyear = document.getElementById(“ sliderId”)。值
)一个错误的值100,我猜这是标准检索输入范围的最大值,因此未创建饼图。
我的错误是什么?我怀疑这与DOM有关。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pie Chart Exercise</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<svg
version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg" >
</svg>
<script src="https://d3js.org/d3.v4.js"></script>
<div id="sliderDiv">
<label id="label1" for="points">Choose a year:</label>
<input type="range" id="sliderId" name="slider" step="1" value='1967' >
</div>
<script src="birthData.js"></script>
<script src="app.js"></script>
</body>
</html>
app.js
var width = 600,
height = 600;
var selectedYear = 1967; //parseInt(document.getElementById("sliderId").value); doe not work
var radius = Math.min(width, height) / 2;
var yearData = birthData.filter(d => d.year === selectedYear);
var yearDataBirths = yearData.map(d => {return d.births});
var rangeDataYears = birthData.map(d => {return d.year});
var minDataYear = d3.min(rangeDataYears);
var maxDataYear = d3.max(rangeDataYears);
function sliderInputCode(){
var sliderInput = document.getElementById("sliderId");
sliderInput.setAttribute('min',minDataYear);
sliderInput.setAttribute('max',maxDataYear);
var selectedYearV2 = parseInt(document.getElementById("sliderId").value);
};
sliderInputCode();
var colorScale = d3.scaleOrdinal()
.domain( yearDataBirths)
.range(d3.schemeCategory20);
var svg = d3.select('svg')
.attr('width',width)
.attr('height',height)
.append('g')
.attr('transform','translate('+ width/2 + ','+ height/2 + ')')
.classed('chart', true);
var pie = d3.pie();
var arc = d3.arc()
.innerRadius(150)
.outerRadius(radius);
var arcs = svg.selectAll('.arc')
.data(pie(yearDataBirths))
.enter()
.append('g')
.attr('class','arc')
.append('path')
.attr('fill', (d,i) => colorScale(i))
.attr('d', arc);
style.css
svg {
margin: 0 auto;
display: block;
}
.arc {
stroke: black;
}
#label1{
display:block;
}
#sliderDiv{
margin: 0 auto;
margin-top: 2em;
display: block;
text-align: center;
}
input[type="text"] {
display: block;
margin : 0 auto;
}
aftherdata.js(我在1967年至1969年间缩写了数据,以进行短暂和疏忽。原始数据从1967年到2014年)
var birthData = [
{
"year": 1967,
"month": "January",
"births": 31502
},
{
"year": 1967,
"month": "February",
"births": 26703
},
{
"year": 1967,
"month": "March",
"births": 28853
},
{
"year": 1967,
"month": "April",
"births": 26958
},
{
"year": 1967,
"month": "May",
"births": 28591
},
{
"year": 1967,
"month": "June",
"births": 29545
},
{
"year": 1967,
"month": "July",
"births": 30086
},
{
"year": 1967,
"month": "August",
"births": 30947
},
{
"year": 1967,
"month": "September",
"births": 32338
},
{
"year": 1967,
"month": "October",
"births": 32296
},
{
"year": 1967,
"month": "November",
"births": 30326
},
{
"year": 1967,
"month": "December",
"births": 28994
},
{
"year": 1968,
"month": "January",
"births": 30691
},
{
"year": 1968,
"month": "February",
"births": 27902
},
{
"year": 1968,
"month": "March",
"births": 29706
},
{
"year": 1968,
"month": "April",
"births": 28800
},
{
"year": 1968,
"month": "May",
"births": 28957
},
{
"year": 1968,
"month": "June",
"births": 28245
},
{
"year": 1968,
"month": "July",
"births": 29111
},
{
"year": 1968,
"month": "August",
"births": 29793
},
{
"year": 1968,
"month": "September",
"births": 31402
},
{
"year": 1968,
"month": "October",
"births": 31429
},
{
"year": 1968,
"month": "November",
"births": 29516
},
{
"year": 1968,
"month": "December",
"births": 28266
},
{
"year": 1969,
"month": "January",
"births": 436201
},
{
"year": 1969,
"month": "February",
"births": 401016
},
{
"year": 1969,
"month": "March",
"births": 439157
},
{
"year": 1969,
"month": "April",
"births": 419464
},
{
"year": 1969,
"month": "May",
"births": 430195
},
{
"year": 1969,
"month": "June",
"births": 425021
},
{
"year": 1969,
"month": "July",
"births": 455342
},
{
"year": 1969,
"month": "August",
"births": 454915
},
{
"year": 1969,
"month": "September",
"births": 451233
},
{
"year": 1969,
"month": "October",
"births": 448391
},
{
"year": 1969,
"month": "November",
"births": 424455
},
{
"year": 1969,
"month": "December",
"births": 445127
}]
I am working on a d3 pie chart with an input range element to dynamically generate values that should determine the pie chart.
If I add value for
var selectedYear
in app.js manually e.g. (var selectedYear = 1967
) the pie chart worksIf I add value for
var selectedYear
dynamically throughgetElementById
method, e.g.(var selectedYear = document.getElementById("sliderId").value
) a wrong value 100, which I guess is the standard max value for input range, is retrieved and so the pie chart does not get created.
What is my mistake here? I suspect it has to do with the dom.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pie Chart Exercise</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<svg
version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg" >
</svg>
<script src="https://d3js.org/d3.v4.js"></script>
<div id="sliderDiv">
<label id="label1" for="points">Choose a year:</label>
<input type="range" id="sliderId" name="slider" step="1" value='1967' >
</div>
<script src="birthData.js"></script>
<script src="app.js"></script>
</body>
</html>
app.js
var width = 600,
height = 600;
var selectedYear = 1967; //parseInt(document.getElementById("sliderId").value); doe not work
var radius = Math.min(width, height) / 2;
var yearData = birthData.filter(d => d.year === selectedYear);
var yearDataBirths = yearData.map(d => {return d.births});
var rangeDataYears = birthData.map(d => {return d.year});
var minDataYear = d3.min(rangeDataYears);
var maxDataYear = d3.max(rangeDataYears);
function sliderInputCode(){
var sliderInput = document.getElementById("sliderId");
sliderInput.setAttribute('min',minDataYear);
sliderInput.setAttribute('max',maxDataYear);
var selectedYearV2 = parseInt(document.getElementById("sliderId").value);
};
sliderInputCode();
var colorScale = d3.scaleOrdinal()
.domain( yearDataBirths)
.range(d3.schemeCategory20);
var svg = d3.select('svg')
.attr('width',width)
.attr('height',height)
.append('g')
.attr('transform','translate('+ width/2 + ','+ height/2 + ')')
.classed('chart', true);
var pie = d3.pie();
var arc = d3.arc()
.innerRadius(150)
.outerRadius(radius);
var arcs = svg.selectAll('.arc')
.data(pie(yearDataBirths))
.enter()
.append('g')
.attr('class','arc')
.append('path')
.attr('fill', (d,i) => colorScale(i))
.attr('d', arc);
style.css
svg {
margin: 0 auto;
display: block;
}
.arc {
stroke: black;
}
#label1{
display:block;
}
#sliderDiv{
margin: 0 auto;
margin-top: 2em;
display: block;
text-align: center;
}
input[type="text"] {
display: block;
margin : 0 auto;
}
birthData.js ( I abbreviated the data here from 1967 to 1969 for shortness and oversightness. Original data goes from 1967 to 2014 )
var birthData = [
{
"year": 1967,
"month": "January",
"births": 31502
},
{
"year": 1967,
"month": "February",
"births": 26703
},
{
"year": 1967,
"month": "March",
"births": 28853
},
{
"year": 1967,
"month": "April",
"births": 26958
},
{
"year": 1967,
"month": "May",
"births": 28591
},
{
"year": 1967,
"month": "June",
"births": 29545
},
{
"year": 1967,
"month": "July",
"births": 30086
},
{
"year": 1967,
"month": "August",
"births": 30947
},
{
"year": 1967,
"month": "September",
"births": 32338
},
{
"year": 1967,
"month": "October",
"births": 32296
},
{
"year": 1967,
"month": "November",
"births": 30326
},
{
"year": 1967,
"month": "December",
"births": 28994
},
{
"year": 1968,
"month": "January",
"births": 30691
},
{
"year": 1968,
"month": "February",
"births": 27902
},
{
"year": 1968,
"month": "March",
"births": 29706
},
{
"year": 1968,
"month": "April",
"births": 28800
},
{
"year": 1968,
"month": "May",
"births": 28957
},
{
"year": 1968,
"month": "June",
"births": 28245
},
{
"year": 1968,
"month": "July",
"births": 29111
},
{
"year": 1968,
"month": "August",
"births": 29793
},
{
"year": 1968,
"month": "September",
"births": 31402
},
{
"year": 1968,
"month": "October",
"births": 31429
},
{
"year": 1968,
"month": "November",
"births": 29516
},
{
"year": 1968,
"month": "December",
"births": 28266
},
{
"year": 1969,
"month": "January",
"births": 436201
},
{
"year": 1969,
"month": "February",
"births": 401016
},
{
"year": 1969,
"month": "March",
"births": 439157
},
{
"year": 1969,
"month": "April",
"births": 419464
},
{
"year": 1969,
"month": "May",
"births": 430195
},
{
"year": 1969,
"month": "June",
"births": 425021
},
{
"year": 1969,
"month": "July",
"births": 455342
},
{
"year": 1969,
"month": "August",
"births": 454915
},
{
"year": 1969,
"month": "September",
"births": 451233
},
{
"year": 1969,
"month": "October",
"births": 448391
},
{
"year": 1969,
"month": "November",
"births": 424455
},
{
"year": 1969,
"month": "December",
"births": 445127
}]
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
您需要设置输入类型=范围的最大值,有一个默认值集为100。如果将值设置为最大值,则将工作。
input类型范围范围文档
You need to set the max value for your input type=range, there is a default value set which is 100. If you set the value to your max value, it will work.
Input type range documentation
您可以给出
max
atribute来指定最大值范围选择器。如果要在1500-2022之间进行选择,则要给出min =“ 1500”
和max =“ 2022”
eg:
you can give
max
atribute to specify the maximum value range selector.if you want to select between 1500 - 2022 then you want to give amin="1500"
andmax="2022"
Eg :