How to make the circles disappear based on keyboard input?

问题

based on this example: http://bl.ocks.org/d3noob/10633704 i wish to make an input on my keyboard (a number) and make the circles disappear with the help of array.slice(). Unfortunally it did not worked well. In my code, i created some circles based on the values of the array days. With the HTML part i am able to create a button, where i can make a number input. With the last part days.slice(nValue) i want that the input number is the same like the number inside the brackets of the slice() function, so the array days is getting shorter and automatically let circles based on the value of the array disappear. But unfortunally there is a mistake i made in this code. Can someone maybe be so kind and help? I am using D3 to solve this problem. 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);
}

回答1:

It took me a while to see what you're after here, and I might still be off a bit in my understanding.

The Problem

As I see understand it, you are modifying an array of data (with a select menu in this case), but the modified array does not appear to modify your visualization. Essentially, as "the array days is getting shorter ... let circles based on the value[s] of the array disappear."

Updating the visualization

To update the visualization you need to bind the new data to your selection. After this you can remove unneeded elements in the visualization, add new ones (not relevant to this question), or modify existing elements. Changing the data array by itself will not update the visualization. To have the visualization utilize the new information you need to bind that data to the selection:

circle.data(data);

Then you can remove the old items:

circle.exit().remove();

Then you can modify properties of the old items:

circle.attr('cx',function(d,i) {...

Your update function needs to at least update the data and remove unneeded elements.

Changing the Array

In the following snippet I append both a select menu and the circles with d3 based on the data in the array. Selecting an item in the menu will remove a circle:

var data = [10,20,30,40,50,60,70,80,90,100];

var color = d3.schemeCategory10; // color array built in

//// Add the select and options:
var select = d3.select('body')
  .append('select')
  .on('change',function() { update(this.value) });
  
var start = select.append('option')
  .html("select: ");
  
var options = select.selectAll('.option')
  .data(data)
  .enter()
  .append('option')
  .attr('class','option')
  .attr('value',function(d,i) { return i; })
  .html(function(d) { return d; });


  
//// Add the circles (and svg)
var svg = d3.selectAll('body')
  .append('svg')
  .attr('width',500)
  .attr('height',200);
  
var circles = svg.selectAll('circle')
  .data(data)
  .enter()
  .append('circle')
  .attr('cx',function(d,i) { return i * 30 + 50; })
  .attr('cy',50)
  .attr('r',10)
  .attr('fill',function(d,i) { return color[i]; });
  
  
// Update everything:
function update(i) {
  data.splice(i,1); // remove that element.
  
  // Update and remove option from the select menu:
  options.data(data).exit().remove();
  
  // Remove that circle:
  circles.data(data).exit().remove(); 
  
  circles.attr('cx',function(d,i) { return i * 30 + 50; })
    .attr('fill',function(d,i) { return color[i]; });
  
  // reset the select menu:
  start.property('selected','selected');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>

There is a problem here, only the last circle and menu item is removed each time. Why? Imagine a four element array, if you remove the second item, d3 does not know that you removed the second item, you might have modified elements two and three and removed element four.

Since all your items are appended with their increment (which position they are in the array), and this doesn't account for holes that were created when other items were removed, you need to change the approach a little.

A solution

Instead of relying on the increment of an item in the array (as this will change every time an element that is before another element is removed from the array), you could use an id property in your data.

This would require restructuring you data a little. Something like:

var data = [ {id:1,value:1},{id2....

As the id property won't change, this makes a better property to set attributes. Take a look at the following snippet:

var data = [{id:0,value:10},{id:1,value:20},{id:2,value:23},{id:3,value:40},{id:4,value:50},{id:5,value:60},{id:6,value:70},{id:7,value:77},{id:8,value:86},{id:9,value:90}];

var color = d3.schemeCategory10; // color array built in

//// Add the select and options:
var select = d3.select('body')
  .append('select')
  .on('change',function() { update(this.value); } ); // add an event listener for changes

// append a default value:
var start = select.append('option')
  .html("Select:");
  
var options = select.selectAll('.option')
  .data(data)
  .enter()
  .append('option')
  .attr('class','option')
  .attr('value',function(d,i) { return i; })
  .html(function(d) { return d.value; });
  
  
//// Add the circles (and svg)
var svg = d3.selectAll('body')
  .append('svg')
  .attr('width',500)
  .attr('height',200);
  
var circles = svg.selectAll('circle')
  .data(data)
  .enter()
  .append('circle')
  .attr('cx',function(d) { return d.id * 30 + 50; })
  .attr('cy',50)
  .attr('r',10)
  .attr('fill',function(d) { return color[d.id]; });
  
  
// Update everything:
function update(i) {
  data.splice(i,1); // remove the element selected
  
  // Update and remove option from the select menu:
  options.data(data).exit().remove();
  
  // Remove that circle:
  circles.data(data).exit().remove(); 
  
  // update the options (make sure each option has the correct attributes
  options.attr('value',function(d,i) { return i; })
  .html(function(d) { return d.value; })
  
  // Make sure circles are in the right place and have the right color:
  circles.attr('cx',function(d) { return d.id * 30 + 50; })
    .attr('fill',function(d) { return color[d.id]; });
    
  // reset the default value so the change will work on all entries:
  start.property('selected', 'selected');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>

回答2:

Try changing your update function to this:

function update(nValue) {

 days = days.slice(nValue);

}

来源：https://stackoverflow.com/questions/42613736/how-to-make-the-circles-disappear-based-on-keyboard-input

标签

javascript

arrays

d3.js

slice