Comment obtenir un graphique à secteurs D3.js pour afficher des données dynamiquement à partir du DOM

Question

J'essaie de créer un graphique à secteurs en utilisant D3.js qui change une fois que le bouton d'envoi a été cliqué dans le formulaire HTML (demandant le total nombre de femelles et de mâles).

C'est ce que j'ai à ce jour pour le fichier 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); 
} 

et c'est la partie 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); 
    }); 

Toute idée sur la façon dont je peux obtenir la propriété de comptage dans l'ensemble de données tableau à modifier en fonction des valeurs de formulaire de l'utilisateur? Prenez les valeurs d'entrée et mettez-les directement dans l'ensemble de données.

Answer 1

Je ne vois pas le besoin du tableau des totaux.

et définissez les propriétés du tableau d'ensemble de données d'objets,

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