d3.js: Farbe nach Gruppe basierend auf Benutzereingabe

Question

Ich bin ein Neuling mit d3.js, um ein Multi-Level-Filter-Plot basierend auf Benutzerauswahl zu erstellen. Alle Filter funktionieren außer enter link description here die kategorische Farbauswahl. Die Farben sind standardmäßig auf den Flüssigkeitstyp eingestellt (Standard sollte der Materialtyp sein) und die Verwendung des Optionsfelds zum Umschalten funktioniert nicht. Kann jemand helfen?

https://plnkr.co/edit/yoFCbe?p=preview

function filter_color(){ 
    colored = document.getElementById("color_Filter"); 
    svg.append("circle") 
     .style("fill", function(d) { 
      if (colored == 0) { 
       return color(d["Material group"]); 
      } else { 
       return color(d["Fluid type"]); 
      } 
     }) 
    } 

Answer 1

Sie sind nicht für den tatsächlichen Wert des Funk Kästchens. Holen Sie sich das checked/unchecked Zustand und die if-Anweisung läuft, wie es sollte:

colored = document.getElementById("color_Filter")[0].checked; // <= mind here 
    if (colored == 0) { 
     return color(d["Material group"]); 
    } else { 
     return color(d["Fluid type"]); 
    } 

https://plnkr.co/edit/gZOIbDgYj6OCs5aM1CV2?p=preview

anzeigen