Aktualisieren von SVG über Optionsauswahl

Ich versuche, ein Textelement innerhalb eines SVG zu erhalten, um mit einer Optionsänderung zu aktualisieren. Nach der Suche war ich in der Lage, zu erreichen, wo ich (in der Konsole) die Optionenänderung innerhalb der anfänglichen Belastung der Seite sehen kann, und wenn sich die Option ändert, aber es ist mir nicht gelungen, die Nummer zu ändern. Jede Hilfe wäre willkommen.Aktualisieren von SVG über Optionsauswahl

<!DOCTYPE html> 
    <html> 
    <head> 
     <title>Dropdown Test</title> 
     <script src="https://d3js.org/d3.v4.min.js"></script> 
    </head> 
    <body> 
     <select id="filter"> 
     <option value="GroupOne">Group One</option> 
     <option value="secondTen">Group Two</option> 
     <option value="thirdTen">Group Three</option> 
     </select> 

     <section id='svgCanvas'> 
     </section> 
     <script> 
     var width = 100; 
     var height = 100; 

     var numberData = [ 
      {"Number":10,"Group":"GroupOne"}, 
      {"Number":13,"Group":"GroupTwo"}, 
      {"Number":6,"Group":"GroupThree"}, 
     ]; 

     var canvas = d3.select("#svgCanvas") 
      .append('svg') 
      .attr('height',height) 
      .attr('width',width); 

     function filterData(filterCriteria) { 
      console.log(filterCriteria); 

      var svgNumber = canvas.selectAll('text') 
       .data(numberData); 

      svgNumber.enter() 
       .append('text') 
       .filter(function(d){return d.Group == filterCriteria;}) 
       .text(function(d){return d.Number;}) 
       .attr('x',10) 
       .attr('y',30) 
       .attr('fill','#000000') 
       .attr('id','numberText'); 

      svgNumber.exit().remove(); 
     }; 

     filterData('GroupOne'); 

     d3.select("#filter") 
      .on('change', function() { 
      var filter = d3.select(this).property('value'); 
      filterData(filter); 
      console.log(filter); 
      }); 
     </script> 
    </body> 
    </html>

Quelle

2017-03-03 user7656032

'var filter = this.value'. –

Meinst du in der ".on ('change' ...." Funktion? Das Problem scheint nicht hier zu sein. Wenn die filterData (filter) -Funktion aufgerufen wird, loggt die Konsole den korrekten Wert. – user7656032

Sorry, wenn ich lese * "Ich war erfolglos bei der Erlangung der Nummer" * Ich dachte, Ihr Problem war, den Eingabewert zu erhalten, nicht das Textelement zu ändern. Ich habe nur eine Antwort geschrieben. –

Sie müssen einige Änderungen:

Werte Ihre Optionen nicht Ihre Datenfeld entsprechen;
Wenden Sie den Filter auf die Daten selbst an;
Da dies D3 v4 ist, merge die Auswahl (ab dem zweiten Mal ist Ihre "Enter" -Auswahl immer leer).

Hier ist der Arbeitscode:

var width = 100; 
 
var height = 100; 
 

 
var numberData = [{ 
 
    "Number": 10, 
 
    "Group": "GroupOne" 
 
}, { 
 
    "Number": 13, 
 
    "Group": "GroupTwo" 
 
}, { 
 
    "Number": 6, 
 
    "Group": "GroupThree" 
 
}, ]; 
 

 
var canvas = d3.select("#svgCanvas") 
 
    .append('svg') 
 
    .attr('height', height) 
 
    .attr('width', width); 
 

 
function filterData(filterCriteria) { 
 

 
    var svgNumber = canvas.selectAll('text') 
 
     .data(numberData.filter(function(d) { 
 
      return d.Group == filterCriteria; 
 
     })); 
 

 
    svgNumber.exit().remove(); 
 

 
    svgNumber.enter() 
 
     .append('text') 
 
     .attr('x', 10) 
 
     .attr('y', 30) 
 
     .attr('fill', '#000000') 
 
     .attr('id', 'numberText') 
 
     .merge(svgNumber) 
 
     .text(function(d) { 
 
      return d.Number; 
 
     }); 
 

 
}; 
 

 
filterData('GroupOne'); 
 

 
d3.select("#filter") 
 
    .on('change', function() { 
 
     var filter = d3.select(this).property('value'); 
 
     //or just--> var filter = this.value; 
 
     filterData(filter); 
 
    });

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<select id="filter"> 
 
    <option value="GroupOne">Group One</option> 
 
    <option value="GroupTwo">Group Two</option> 
 
    <option value="GroupThree">Group Three</option> 
 
</select> 
 
<section id='svgCanvas'> 
 
</section>

Quelle

2017-03-04 00:44:01

Perfekt gearbeitet! Danke für die Hilfe. – user7656032

Aktualisieren von SVG über Optionsauswahl

Antwort

Verwandte Themen