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

Question

我正在尝试进行数据可视化，以便每次在小组下拉菜单中选择新部门时都可以绘制新图形，并且您可以在查看原始数据或总体上以角色中男性/女性的百分比进行切换。 每次选择一个新选项时，我都会刷新图，但是后来我添加了单选按钮，并且必须将所有内容切换到新的位置。 现在，仅在更改单选按钮时才绘制新图形。 如何更改单选按钮或在菜单中选择的新选项（以及当前单选按钮的选择），以刷新图表？

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

<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

我将创建一个针对所有事件（单选和菜单更改事件）调用的更新方法，然后在该新的更新方法中获取当前所选单选按钮的值，然后基于该值调用相应的updateraw或updatepercent方法。 类似于以下未经测试的伪代码

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