javascript - 无法弄清楚如何更新量表 [Javascript / D3.js]

Question

我从一个 csv 文件中获取我的数据，该文件的结构类似于：

smoker,works_out,age_group,severity,probability
yes,yes,<25,50,60
yes,no,<25,40,70
................

我的仪表（运行代码片段）应该可视化在下拉列表中选择的smoker不同值的严重性和概率works_out。age_group

目前这是我的 js 函数，通过根据下拉列表中选择的参数过滤 csv 来获取严重性和概率值：

下面的代码获取下拉参数

document.getElementById("button").onclick = function(){
  var lists = document.getElementsByTagName('SELECT'), chosen = [], temp = [], list = {}, i, j; 
    for(i = 0; i < lists.length; i++) {
      list = lists[i];
      temp = [];
      for(j = 0; j < list.length; j++) {
        if(list[j].selected) temp.push(list[j].value);  
      }
      chosen.push(temp);
    }

var json_string = JSON.stringify(chosen);
var arr = JSON.parse(json_string);

smoker = arr[0][0];
works_out = arr[1][0];
age = arr[2][0];

这部分使用参数过滤csv以获得严重性和概率值

d3.csv("simulator.csv", function(data) {

  a = data.filter(function(d) {
        return d.smoker == smoker
        && (d.works_out == works_out)
        && (d.age == age)
      })

  sev = a[0]['severity']
  prob = a[0]['surgery_prob']

这就是我卡住的地方。当用户通过下拉提交新参数时，我不知道如何更新量规。

下面是我正在使用的 JS 和 HTML：

var width = 350;
var arcSize = (6 * width / 100);
var innerRadius = arcSize * 3;


var data = [{
    value: 50,
    label: "Severity",
    color: '#B8D846'
  },
  {
    value: 60,
    label: "Probability",
    color: '#52419F'
  },
];


var svg = d3.select('#result').append('svg').attr('width', width).attr('height', width);

var arcs = data.map(function(obj, i) {
  return d3.svg.arc().innerRadius(i * arcSize + innerRadius).outerRadius((i + 1) * arcSize - (width / 100) + innerRadius);
});
var arcsGrey = data.map(function(obj, i) {
  return d3.svg.arc().innerRadius(i * arcSize + (innerRadius + ((arcSize / 2) - 2))).outerRadius((i + 1) * arcSize - ((arcSize / 2)) + (innerRadius));
});

var pieData = data.map(function(obj, i) {
  return [{
      value: obj.value * 0.75,
      arc: arcs[i],
      object: obj
    },
    {
      value: (100 - obj.value) * 0.75,
      arc: arcsGrey[i],
      object: obj
    },
    {
      value: 100 * 0.25,
      arc: arcs[i],
      object: obj
    }
  ];
});

var pie = d3.layout.pie().sort(null).value(function(d) {
  return d.value;
});

var g = svg.selectAll('g').data(pieData).enter()
  .append('g')
  .attr('transform', 'translate(' + width / 2 + ',' + width / 2 + ') rotate(180)');
var gText = svg.selectAll('g.textClass').data([{}]).enter()
  .append('g')
  .classed('textClass', true)
  .attr('transform', 'translate(' + width / 2 + ',' + width / 2 + ') rotate(180)');


g.selectAll('path').data(function(d) {
    return pie(d);
  }).enter().append('path')
  .attr('id', function(d, i) {
    if (i == 1) {
      return "Text" + d.data.object.label
    }
  })
  .attr('d', function(d) {
    return d.data.arc(d);
  }).attr('fill', function(d, i) {
    return i == 0 ? d.data.object.color : i == 1 ? '#D3D3D3' : 'none';
  });

svg.selectAll('g').each(function(d, index) {
  var el = d3.select(this);
  var path = el.selectAll('path').each(function(r, i) {
    if (i === 1) {
      var centroid = r.data.arc.centroid({
        startAngle: r.startAngle + 0.05,
        endAngle: r.startAngle + 0.001 + 0.05
      });
      var lableObj = r.data.object;
      g.append('text')
        .attr('font-size', ((5 * width) / 100))
        .attr('dominant-baseline', 'central')
   
        .append("textPath")
        .attr("textLength", function(d, i) {
          return 0;
        })
        .attr("xlink:href", "#Text" + r.data.object.label)
        .attr("startOffset", '5')
        .attr("dy", '-3em')
        .text(lableObj.value + '%');
    }
    if (i === 0) {
      var centroidText = r.data.arc.centroid({
        startAngle: r.startAngle,
        endAngle: r.startAngle
      });
      var lableObj = r.data.object;
      gText.append('text')
        .attr('font-size', ((5 * width) / 100))
        .text(lableObj.label)
        .attr('transform', "translate(" + (centroidText[0] - ((1.5 * width) / 100)) + "," + (centroidText[1] + ") rotate(" + (180) + ")"))
        .attr('dominant-baseline', 'central');
    }
  });
});

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Radial</title>


</head>


<body>
  <form id="my-form" method="post">
    <select name="Smoker" id="Smoker">
      <option value="" selected disabled hidden>Smoker</option>
      <option value="Yes">Yes</option>
      <option value="No">No</option>
    </select>

    <select>
      <option value="" selected disabled hidden>works out</option>
      <option value="yes">yes</option>
      <option value="no">no</option>

    </select>

    <select>
      <option value="" selected disabled hidden>Age Group</option>
      <option value="&lt;25">Less than 25</option>
      <option value="&lt;25">Greater than 35</option>
      <option value="25-35">25 - 35</option>
    </select>



    <input type="button" name="button" id="button" value="submit" onclick="updateData()" />
  </form>


  <div id='result'></div>


  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
  <script src="radial.js"></script>

</body>

</html>

标签： javascripthtmld3.js