javascript - 如何获取 D3.js 饼图以从 DOM 动态呈现数据

Question

我正在尝试使用 D3.js 制作一个饼图，一旦在 HTML 表单中单击提交按钮(询问女性和男性的总数)，该饼图就会发生变化。

这是我目前拥有的 JavaScript 文件:

// Data
function getTotalFemales() {
    let total = document.getElementById('totalFemales').value;
    totals.push(parseFloat(total));
}

function getTotalMales() {
    let total = document.getElementById('totalMales').value;
    totals.push(parseFloat(total));
}

let totals = [];

// Dataset
var dataset = [
    {label: 'Female Count', count: 1},
    {label: 'Male Count', count: 1}
];

function updateChart() {
    dataset.count.forEach(function(num)
        dataset.count = totals[num]
    });

    console.log(totals);
}

这是 d3 部分:

var path = pieChart.selectAll('path')
        .data(pie(dataset))
        .enter()
        .append('path')
        .attr('d', arc)
        .attr('fill', function(d, i) {
        return color(d.data.label);
    });

关于如何让数据集数组中的计数属性根据用户的表单值进行更改，我有什么想法吗？

Answer 1

获取输入值并直接将它们放入数据集中。我认为不需要总计数组。

并设置数据集对象数组的属性，

  var dataset = [
    {label: 'Female Count', count: 1},
    {label: 'Male Count', count: 1}
];

    function getTotals() {
        dataset[0].count = document.getElementById('totalFemales').value;
        dataset[1].count = document.getElementById('totalMales').value;
    }