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

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

1 个答案: