我正在研究一個帶有輸入范圍元素的 d3 餅圖，以動態生成應該確定餅圖的值。
var selectedYear如果我在 app.js 中手動添加值，例如（var selectedYear = 1967），餅圖可以作業var selectedYear如果我通過方法動態添加值getElementById，例如（var selectedYear = document.getElementById("sliderId").value）一個錯誤的值 100，我猜這是輸入范圍的標準最大值，將被檢索，因此不會創建餅圖。
我的錯誤是什么？我懷疑這與dom有關。
索引.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>
應用程式.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);
樣式.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（為了簡短和疏忽，我將這里的資料從 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
}]
uj5u.com熱心網友回復：
您需要為輸入型別=范圍設定最大值，默認值設定為 100。如果將值設定為最大值，它將起作用。
現在我改變了 app.js 的排列：
var width = 600,
height = 600;
sliderInputCode();
var selectedYear = parseInt(document.getElementById("sliderId").value);
var radius = Math.min(width, height) / 2;
var yearData = birthData.filter(d => d.year === selectedYear);
var yearDataBirths = yearData.map(d => {return d.births});
function sliderInputCode(){
var rangeDataYears = birthData.map(d => {return d.year});
var minDataYear = d3.min(rangeDataYears);
var maxDataYear = d3.max(rangeDataYears);
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);
所以現在函式 sliderInputCode() 將在 var selectedYear = parseInt(document.getElementById("sliderId").value) 從 html 檢索輸入元素值之前創建輸入最小值和最大值。它現在就像在創建餅圖中一樣作業。但是現在移動輸入滑塊并沒有讓我得到其他輸入元素值，這應該對代碼行 var selectedYear = parseInt(document.getElementById("sliderId").value);
有人在這里看到錯誤嗎？謝謝
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/477160.html
標籤：javascript dom d3.js