Javascript 从下拉菜单和/或单选按钮更改中选择新变量时绘制新图形

我正在尝试制作一个数据可视化，每当您在“组”下拉菜单中选择一个新部门时，都会绘制一个新的图表，您可以在查看原始数据或查看角色中男性/女性的总体百分比之间切换。每次选择一个新选项时，我都会让图表刷新，但后来我添加了单选按钮，不得不将所有选项都切换到最新状态。现在，它仅在单选按钮更改时绘制新图形。如何使图表刷新以更改单选按钮或菜单中选择的新选项（当前单选按钮选择保持不变）

以下是我的代码的一些相关部分：

<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>

选择部门：
--选择大学系--
生物
化学


原始数据
百分比

变量生物学=[
{组：'研究员'，男：0，女：0}，
{组：'讲师'，男：21，女：9}，
{组：'副教授'，男：16，女：7}，
{组：'教授'，男：19，女：4}，
{组：'名誉教授'，男：1，女：0}
];
var UoAChemistry=[
{组：'研究员'，男：2，女：1}，
{组：'讲师'，男：11，女：1}，
{组：'副教授'，男：6，女：1}，
{组：'教授'，男：9，女：4}，
{组：'名誉教授'，男：2，女：0}
];
函数更新程序（示例数据）{
var maxValue=Math.max(
d3.max（例如数据，函数（d）{return d.male；}），
max（示例数据，函数（d）{return d.female；}）
);
svg.append（“文本”）
.attr（“x”，w/2））
.attr（“y”、“-11px”）
.attr（“文本锚定”、“中间”）
.style（“字体大小”，“18px”）
.text（“大学系+的职业发展”）；
var xScale=d3.scale.linear（）
.domain（[0，maxValue]）
.范围（[0，区域宽度]）
.nice（）；
var xScaleLeft=d3.scale.linear（）
.domain（[0，maxValue]）
.范围（[regionWidth，0]）；
var xscalerRight=d3.scale.linear（）
.domain（[0，maxValue]）
.范围（[0，区域宽度]）；
var yScale=d3.scale.ordinal（）
.domain（exampleData.map（函数（d）{returnd.group；}））
.范围圆带（[h，0]，0.1）；
var yaxisleet=d3.svg.axis（）
.刻度（yScale）
.orient（'右'）
.尺寸（4,0）
.填充（边缘。中间-4）；
var yAxisRight=d3.svg.axis（）
.刻度（yScale）
.orient（'左'）
.尺寸（4,0）
.格式（“”）；
var xAxisRight=d3.svg.axis（）
.scale（xScale）
.orient（'底部'）
.d.格式（d3.格式（“d”））；
var xAxisLeft=d3.svg.axis（）
.scale（xScale.copy（）.range（[pointA，0]））
.orient（'底部'）
.d.格式（d3.格式（“d”））；
var leftBarGroup=svg.append（'g'）
.attr（'transform'，translation（pointA，0）+'scale（-1,1'）；
var rightBarGroup=svg.append（'g'）
.attr（'transform'，translation（pointB，0））；
append（'g'）
.attr（'class'，'y轴左'）
.attr（'transform'，translation（pointA，0））
.呼叫（左）
.selectAll（'text'）
.style（'text-anchor'，'middle'）；
append（'g'）
.attr（'class'，'y轴右'）
.attr（'transform'，translation（pointB，0））
.呼叫（右）；
append（'g'）
.attr（'类'，'轴x左'）
.attr（'transform'，translation（0，h））
.呼叫（左）；
append（'g'）
.attr（'class'，'axis x right'）
.attr（'transform'，translation（pointB，h））
.通话（右）；
leftBarGroup.selectAll（'.bar.left'））
.数据（示例数据）
.enter（）.append（'rect'）
.attr（'class'，'bar left'）
.attr（'x'，0）
.attr（'y'，函数（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'））
.数据（示例数据）
.enter（）.append（'rect'）
.attr（'class'，'bar right'）
.attr（'x'，0）
.attr（'y'，函数（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）；
};
函数更新百分比（示例数据）{
var maxValue=Math.max(
max（例如数据，函数（d）{return（1）；}），
max（示例数据，函数（d）{return（1）；}）
);
svg.append（“文本”）
.attr（“x”，w/2））
.attr（“y”、“-11px”）
.attr（“文本锚定”、“中间”）
.style（“字体大小”，“18px”）
.text（“大学系+的职业发展”）；
var xScale=d3.scale.linear（）
.domain（[0，maxValue]）
.范围（[0，区域宽度]）
.nice（）；
var xScaleLeft=d3.scale.linear（）
.domain（[0，maxValue]）
.范围（[regionWidth，0]）；
var xscalerRight=d3.scale.linear（）
.domain（[0，maxValue]）
.范围（[0，区域宽度]）；
var yScale=d3.scale.ordinal（）
.domain（exampleData.map（函数（d）{returnd.group；}））
.范围圆带（[h，0]，0.1）；
var yaxisleet=d3.svg.axis（）
.刻度（yScale）
.orient（'右'）
.尺寸（4,0）
.填充（边缘。中间-4）；
var yAxisRight=d3.svg.axis（）
.刻度（yScale）
.orient（'左'）
.尺寸（4,0）
.格式（“”）；
var xAxisRight=d3.svg.axis（）
.scale（xScale）
.orient（'底部'）
.tick格式（d3.格式（“%”）；
var xAxisLeft=d3.svg.axis（）
.
//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
    }
}