Angeklickten Wert in Variable zwischenspeichern

[milesdavis]

Hey Leute,
ich habe folgenden Code:

var data = [10,20,30,40];

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,i) { return i; });



//// 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');
}

Der Code erzeugt im Grunde mit D3.js 4 Kreise und dazu ein Drop-Fenster mit 4 Auswahlmöglichkeiten. Diese Auswahlmöglichkeiten sind die Indexe i des Arrays "data", also 0, 1, 2, 3.
Dies wird durch die zeile

 .html(function(d,i) { return i; });

ermöglicht.
Durch Klicken der Indexe im Drop-Fenster verschwinden die Kreise mit Hilfe der Splice-Funktion.

Mein Ziel ist nun folgendes:
ich möchte auf einen Index i im Drop-Fenster klicken, sagen wir mal 2 und diesen Wert in einer Variable "a" zwischenspeichern. Dieser soll dann automatisch von der Splice-funktion verwendet werden, also

data.splice(i,a);

.

Ich möchte also, dass wenn man den Index "2" , quasi 2 Elemente durch die Splice-Funktion entfernt werden. Und wenn ich Index "3" anklicke, dann sollen 3 Elemente entfernt werden.
Kann mir einer von euch dabei helfen?

Vielen lieben Dank
Gruss

- - - Aktualisiert - - -

Ich habe es schon mit "selectedIndex" probiert, aber das war wohl nicht die richtige Lösung.

- - - Aktualisiert - - -

 

[kkapsner]

Ist das nicht der gleiche Werte wie schon in i? Irgendwie verstehe ich nicht, was du eigentlich machen willst.

Theoretisch hast du this.selectedIndex auch an der Stelle zur Verfügung, wo du auch this.value ausliest.

 

[milesdavis]

Hey, also es klappt, wenn man

.on('change',function() { update(this.value) });

in

 .on('change',function() { update(this.value, this.options[this.selectedIndex].text) });

ändert.

Und dann die update-Funktion in

function update(i,a) {
  data.splice(i,a);........}

dazu ändert.

Nun verstehe ich aber nicht genau,wie man diesen neuen Teil deuten soll:

 .on('change',function() { update(this.value, this.options[this.selectedIndex].text) });

Man übergibt der update-Funktion 2 Parameter, der erste ist

this.value

und der zweite

this.options[this.selectedIndex].text

. Kann mir einer helfen und erklären, warum man das hier in diesem Beispiel macht?

 

[kkapsner]

Kann mir einer helfen und erklären, warum man das hier in diesem Beispiel macht?

Äh... das kannst nur du erklären. Mir ist immer noch komplett schleierhaft, was du eigentlich genau erreichen willst. Auch glaube ich, dass in i und a jetzt genau das gleiche drin steht...