Zeichnen Sie neue Grafik bei der Auswahl der neuen Variable aus Dropdown-Menü und/oder Radio-Taste ändern

Question

Ich versuche, eine Daten-Visualisierung, die ein neues Diagramm zeichnet jedes Mal, wenn Sie eine neue Abteilung in einem Gruppen-Menü wählen und Sie können um zwischen den Rohdaten oder insgesamt als Prozentsatz von Männern/Frauen in der Rolle zu wechseln. Ich habe das Diagramm bei jeder neuen Option aktualisiert, aber dann habe ich die Optionsfelder hinzugefügt und alles neu eingestellt. Jetzt wird nur ein neuer Graph gezeichnet, wenn der Radiobutton geändert wird. Wie kann ich den Graphen für eine Änderung des Radioknopfes aktualisieren ODER eine neue Option, die im Menü gewählt wurde (und die aktuelle Auswahl an Radioknöpfen bleibt bestehen)?

Hier sind einige der relevanten Abschnitte meines Codes:

<p>Select department: <select id="opts"> 
     <option hidden>-- Select University Department --</option> 
     <optgroup label="University of Auckland"> 
     <option value="UoABiology">Biology</option> 
     <option value="UoAChemistry">Chemistry</option> 
     </optgroup></select> 
</p> 

<p> 
     <input name="mode" type="radio" value="raw" id="raw" ><label for="data-raw"> Raw data</label> 
     <input name="mode" type="radio" value="percent" id="percent" ><label for="data-percent"> Percentage</label> 
    </p> 

<script> 
var UoABiology = [ 
     {group: 'Research Fellow', male: 0, female: 0}, 
     {group: 'Lecturer', male: 21, female: 9}, 
     {group: 'Associate Professor', male: 16, female: 7}, 
     {group: 'Professor', male: 19, female: 4}, 
     {group: 'Emeritus Professor', male: 1, female: 0} 
     ]; 
     var UoAChemistry = [ 
     {group: 'Research Fellow', male: 2, female: 1}, 
     {group: 'Lecturer', male: 11, female: 1}, 
     {group: 'Associate Professor', male: 6, female: 1}, 
     {group: 'Professor', male: 9, female: 4}, 
     {group: 'Emeritus Professor', male: 2, female: 0} 
     ]; 

function updateraw(exampleData) { 
     var maxValue = Math.max(
     d3.max(exampleData, function(d) { return d.male; }), 
     d3.max(exampleData, function(d) { return d.female; }) 
    ); 

     svg.append("text") 
      .attr("x", (w/2)) 
      .attr("y", "-11px")    
      .attr("text-anchor", "middle") 
      .style("font-size", "18px") 
      .text("Career Progression in "+ "University Departments" +""); 

     var xScale = d3.scale.linear() 
     .domain([0, maxValue]) 
     .range([0, regionWidth]) 
     .nice(); 

     var xScaleLeft = d3.scale.linear() 
     .domain([0, maxValue]) 
     .range([regionWidth, 0]); 

     var xScaleRight = d3.scale.linear() 
     .domain([0, maxValue]) 
     .range([0, regionWidth]); 

     var yScale = d3.scale.ordinal() 
     .domain(exampleData.map(function(d) { return d.group; })) 
     .rangeRoundBands([h,0], 0.1); 

     var yAxisLeft = d3.svg.axis() 
     .scale(yScale) 
     .orient('right') 
     .tickSize(4,0) 
     .tickPadding(margin.middle-4); 

     var yAxisRight = d3.svg.axis() 
     .scale(yScale) 
     .orient('left') 
     .tickSize(4,0) 
     .tickFormat(''); 

     var xAxisRight = d3.svg.axis() 
     .scale(xScale) 
     .orient('bottom') 
     .tickFormat(d3.format("d")); 

     var xAxisLeft = d3.svg.axis() 
     .scale(xScale.copy().range([pointA, 0])) 
     .orient('bottom') 
     .tickFormat(d3.format("d")); 

     var leftBarGroup = svg.append('g') 
     .attr('transform', translation(pointA, 0) + 'scale(-1,1)'); 
     var rightBarGroup = svg.append('g') 
     .attr('transform', translation(pointB, 0)); 

     svg.append('g') 
     .attr('class', 'axis y left') 
     .attr('transform', translation(pointA, 0)) 
     .call(yAxisLeft) 
     .selectAll('text') 
     .style('text-anchor', 'middle'); 

     svg.append('g') 
     .attr('class', 'axis y right') 
     .attr('transform', translation(pointB, 0)) 
     .call(yAxisRight); 

     svg.append('g') 
     .attr('class', 'axis x left') 
     .attr('transform', translation(0, h)) 
     .call(xAxisLeft); 

     svg.append('g') 
     .attr('class', 'axis x right') 
     .attr('transform', translation(pointB, h)) 
     .call(xAxisRight); 

     leftBarGroup.selectAll('.bar.left') 
     .data(exampleData) 
     .enter().append('rect') 
      .attr('class', 'bar left') 
      .attr('x', 0) 
      .attr('y', function(d) { return yScale(d.group); }) 
      .attr('width', function(d) { return xScale(d.male); }) 
      .attr('height', yScale.rangeBand()) 
      .on('mouseover', tipM.show) 
      .on('mouseout', tipM.hide); 

     rightBarGroup.selectAll('.bar.right') 
     .data(exampleData) 
     .enter().append('rect') 
      .attr('class', 'bar right') 
      .attr('x', 0) 
      .attr('y', function(d) { return yScale(d.group); }) 
      .attr('width', function(d) { return xScale(d.female); }) 
      .attr('height', yScale.rangeBand()) 
      .on('mouseover', tipF.show) 
      .on('mouseout', tipF.hide); 
    }; 

    function updatepercent(exampleData) { 
     var maxValue = Math.max(
     d3.max(exampleData, function(d) { return (1); }), 
     d3.max(exampleData, function(d) { return (1); }) 
    ); 

     svg.append("text") 
      .attr("x", (w/2)) 
      .attr("y", "-11px")    
      .attr("text-anchor", "middle") 
      .style("font-size", "18px") 
      .text("Career Progression in "+ "University Departments" +""); 

     var xScale = d3.scale.linear() 
     .domain([0, maxValue]) 
     .range([0, regionWidth]) 
     .nice(); 

     var xScaleLeft = d3.scale.linear() 
     .domain([0, maxValue]) 
     .range([regionWidth, 0]); 

     var xScaleRight = d3.scale.linear() 
     .domain([0, maxValue]) 
     .range([0, regionWidth]); 

     var yScale = d3.scale.ordinal() 
     .domain(exampleData.map(function(d) { return d.group; })) 
     .rangeRoundBands([h,0], 0.1); 

     var yAxisLeft = d3.svg.axis() 
     .scale(yScale) 
     .orient('right') 
     .tickSize(4,0) 
     .tickPadding(margin.middle-4); 

     var yAxisRight = d3.svg.axis() 
     .scale(yScale) 
     .orient('left') 
     .tickSize(4,0) 
     .tickFormat(''); 

     var xAxisRight = d3.svg.axis() 
     .scale(xScale) 
     .orient('bottom') 
     .tickFormat(d3.format("%")); 

     var xAxisLeft = d3.svg.axis() 
     .scale(xScale.copy().range([pointA, 0])) 
     .orient('bottom') 
     .tickFormat(d3.format("%")); 

     var leftBarGroup = svg.append('g') 
     .attr('transform', translation(pointA, 0) + 'scale(-1,1)'); 
     var rightBarGroup = svg.append('g') 
     .attr('transform', translation(pointB, 0)); 

     svg.append('g') 
     .attr('class', 'axis y left') 
     .attr('transform', translation(pointA, 0)) 
     .call(yAxisLeft) 
     .selectAll('text') 
     .style('text-anchor', 'middle'); 

     svg.append('g') 
     .attr('class', 'axis y right') 
     .attr('transform', translation(pointB, 0)) 
     .call(yAxisRight); 

     svg.append('g') 
     .attr('class', 'axis x left') 
     .attr('transform', translation(0, h)) 
     .call(xAxisLeft); 

     svg.append('g') 
     .attr('class', 'axis x right') 
     .attr('transform', translation(pointB, h)) 
     .call(xAxisRight); 

     leftBarGroup.selectAll('.bar.left') 
     .data(exampleData) 
     .enter().append('rect') 
      .attr('class', 'bar left') 
      .attr('x', 0) 
      .attr('y', function(d) { return yScale(d.group); }) 
      .attr('width', function(d) { return xScale(d.male/Math.max(d.male+d.female,0.1)); }) 
      .attr('height', yScale.rangeBand()) 
      .on('mouseover', tipMpercent.show) 
      .on('mouseout', tipMpercent.hide);; 

     rightBarGroup.selectAll('.bar.right') 
     .data(exampleData) 
     .enter().append('rect') 
      .attr('class', 'bar right') 
      .attr('x', 0) 
      .attr('y', function(d) { return yScale(d.group); }) 
      .attr('width', function(d) { return xScale(d.female/Math.max(d.male+d.female,0.1)); }) 
      .attr('height', yScale.rangeBand()) 
      .on('mouseover', tipFpercent.show) 
      .on('mouseout', tipFpercent.hide);; 
    }; 
var radios = document.querySelectorAll('input[type=radio][name="mode"]'); 

    function radiobutton() { 
    if (this.value === 'raw') { 
     var exampleData = eval(d3.select('#opts').property('value')); 
     svg.selectAll('*').remove(); 
     updateraw(exampleData);} 
    else if (this.value === 'percent') { 
     var exampleData = eval(d3.select('#opts').property('value')); 
     svg.selectAll('*').remove(); 
     updatepercent(exampleData);} 
    } 

    Array.prototype.forEach.call(radios, function(radio) { 
     radio.addEventListener('change', radiobutton); 
    }); 

//THIS IS WHAT I USED TO HAVE TO CHANGE THE GRAPH ON NEW DROP DOWN MENU SELECTION 


/* d3.select('#opts') 
     .on('change', function() { 
     var exampleData = eval(d3.select(this).property('value')); 
     svg.selectAll('*').remove(); 
     updatepercent(exampleData)}); */ 
    </script> 

Answer 1

ich eine Update-Methode erstellen würde, dass Sie die Ereignisse für alle rufen (Radios und Menüänderungsereignisse) dann in dieser neuen Update-Methode erhalten Wählen Sie den Wert des aktuell ausgewählten Optionsfelds aus und rufen Sie die entsprechenden update- oder updateprocent-Methoden auf. etwas wie der folgende nicht getestete Pseudocode

//setup event listeners - preferably using consistent selection methods (either vanilla js or using d3 but not mixed) 
Array.prototype.forEach.call(radios, function(radio) { 
    radio.addEventListener('change', myGenericUpdateEvent); 
}); 

d3.select('#opts').on('change', myGenericUpdateEvent); 

function myGenericUpdateEvent() { 
    var selectedRadio = document.querySelector('input[type=radio][name="mode"][checked]'); 
    if (selectedRadio.value === 'raw') { 
     //do the updateraw thing 
    } else { 
     //do the other thing 
    } 
}