DOMからデータを動的にレンダリングするD3.js円グラフを取得する方法

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

私はデータセット内のCountプロパティを取得する方法上の任意のアイデアユーザーのフォーム値に応じて配列を変更しますか？

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