js var不会获得document.getElementById().value的值

发布于 2025-01-30 00:39:38 字数 5789 浏览 2 评论 0原文

我正在研究具有输入范围元素的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 works

  • If I add value for var selectedYear dynamically through getElementById 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

九厘米的零° 2025-02-06 00:39:38

您需要设置输入类型=范围的最大值,有一个默认值集为100。如果将值设置为最大值,则将工作。

input类型范围范围文档

该值不会大于最大值。默认值为100。

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 
  }];
  var width = 600,
    height = 600;
var selectedYear = parseInt(document.getElementById("sliderId").value);
console.info(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});
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);
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;
        }
<!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" max="1967" name="slider" step="1" value="1967" >
  </div>
  <script src="birthData.js"></script>
  <script src="app.js"></script>
</body>
</html>

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

The value won't be greater than max. The default is 100.

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 
  }];
  var width = 600,
    height = 600;
var selectedYear = parseInt(document.getElementById("sliderId").value);
console.info(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});
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);
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;
        }
<!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" max="1967" name="slider" step="1" value="1967" >
  </div>
  <script src="birthData.js"></script>
  <script src="app.js"></script>
</body>
</html>

予囚 2025-02-06 00:39:38

您可以给出max atribute来指定最大值范围选择器。如果要在1500-2022之间进行选择,则要给出min =“ 1500”max =“ 2022”

eg:

 <input
    type="range"
    id="sliderId"
    name="slider"
    step="1"
    min="1500"
    max="1967"
  />

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 a min="1500" and max="2022"

Eg :

 <input
    type="range"
    id="sliderId"
    name="slider"
    step="1"
    min="1500"
    max="1967"
  />
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文