從下拉菜單和/或單選按鈕更改中選擇新變量后繪制新圖形

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