如何获取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; 
    }