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

【问题标题】：How to get a D3.js pie chart to render data dynamically from the DOM如何获取 D3.js 饼图以从 DOM 动态呈现数据
【发布时间】：2017-10-05 13:22:33
【问题描述】：

我正在尝试使用 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);
    });

知道如何让数据集数组中的计数属性根据用户的表单值进行更改吗？

【问题讨论】：

如果您创建了代码 sn-p 会有所帮助。

标签： javascript html css d3.js pie-chart

【解决方案1】：

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

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

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

【讨论】：