After reviewing the example at http://bl.ocks.org/d3noob/10633704, my goal is to create an input field on my keyboard where I can enter a number, and then use array.slice() to make circles disappear based on that number. Unfortunately, my implementation did not work as expected. In my code, I have generated circles based on the values of the array days. Within the HTML section, I have created a button for inputting a number. The desired functionality is to shorten the array days using the value entered in the input field (referenced within the brackets of the slice() function) so that circles associated with those values will disappear. However, there seems to be an error in my code. Can someone please assist? I am utilizing D3 to address this issue.
Thanks
<!DOCTYPE html>
<meta charset="utf-8">
<title>Input (number) test</title>
<p>
<label for="nValue"
style="display: inline-block; width: 120px; text-align: right">
angle = <span id="nValue-value"></span>
</label>
<input type="number" min="0" max="360" step="4" value="0" id="nValue">
</p>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var width = 600;
var height = 300;
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
var days = [7, 12, 20, 31, 40, 50];
console.log(days);
var circle = svg.selectAll("circle")
.data(days)
.enter().append("circle")
.attr("cy", 60)
.attr("cx", function(d, i) { return i * 100 + 40; })
.attr("r", function(d) { return Math.sqrt(d); });
d3.select("#nValue").on("input", function() {
update(+this.value);
});
// Initial update value
update(0);
function update(nValue) {
days.slice(nValue);
}