javascript - 创建条形作为值的总和

Question

这个有点难以定义，但我会尽力。这是我的 1000 行数据中的一个:

{
    "chartData":[
        {"vNm":"Cyrus Shadfar","vId":5167,"values":[
            {"period":"2014-12-12","id":37419,"amount":99.995},
            {"period":"2014-01-09","id":32630,"amount":180.00},
            {"period":"2014-08-25","id":35100,"amount":371.25},
            {"period":"2014-08-26","id":35102,"amount":393.75},
            {"period":"2014-12-08","id":37545,"amount":49.11},
            {"period":"2014-09-03","id":35848,"amount":90.00},
            {"period":"2014-12-16","id":37673,"amount":69.48},
            {"period":"2014-08-27","id":35909,"amount":371.25},
            {"period":"2014-06-04","id":34727,"amount":80.00},
            {"period":"2014-06-09","id":34810,"amount":90.00},
            {"period":"2014-11-17","id":37191,"amount":130.00},
            {"period":"2014-03-27","id":33642,"amount":90.00},
            {"period":"2014-06-11","id":34300,"amount":90.00},
            {"period":"2014-09-16","id":36115,"amount":99.995},
            {"period":"2014-06-18","id":34958,"amount":90.00},
            {"period":"2014-05-07","id":34428,"amount":90.00},
            {"period":"2014-04-10","id":33855,"amount":90.00},
            {"period":"2014-10-24","id":36830,"amount":100.00},
            {"period":"2014-12-19","id":37424,"amount":100.00},
            {"period":"2014-11-26","id":37446,"amount":90.00},
            {"period":"2014-02-20","id":32678,"amount":180.00},
            {"period":"2014-03-20","id":33360,"amount":90.00},
            {"period":"2014-12-12","id":37550,"amount":69.48},
            {"period":"2014-04-22","id":34010,"amount":90.00},
            {"period":"2014-04-24","id":34068,"amount":90.00},
            {"period":"2014-03-13","id":33500,"amount":90.00},
            {"period":"2014-07-16","id":35287,"amount":52.505},
            {"period":"2014-06-05","id":34726,"amount":90.00},
            {"period":"2014-02-24","id":32933,"amount":90.00},
            {"period":"2014-11-10","id":37183,"amount":192.50},
            {"period":"2014-08-28","id":36015,"amount":202.50},
            {"period":"2014-03-20","id":33643,"amount":90.00},
            {"period":"2014-06-13","id":34951,"amount":90.00},
            {"period":"2014-06-12","id":34381,"amount":80.00},
            {"period":"2014-06-20","id":34959,"amount":90.00}
        ]}
    ]
}

有 25 个与此完全相同的集合，具有不同的金额、周期和 ID。我想要的只是图表中的条形图由金额总和组成，而不是像我在这里所做的那样由各个金额组成:

svg.selectAll(".bars")
    .data(data.chartData, function(d){return d.vNm;})
    .enter().append("g")
    .attr("class", "bars")
    .selectAll(".bar")
    .data(function(d){return d.values;})
    .enter().append("rect")
    .attr("x", function(d) {
        return x(d.vNm);
    })
    .attr("width", sizeOfSpace)
    .attr("y", function(d){
        return y(d.amount)
    })
    .attr("height", function(d) {
        return height - y(d.amount); })
    .attr("class", "bar")
    .on('mouseover', tip.show)
    .on('mouseout', tip.hide);

这是一个工作 fiddle :http://jsfiddle.net/o5fbqqnq/ (相当大，无论是代码上还是视觉上)

Answer 1

似乎是一个简单的问题，所以也许我误解了它。为什么像下面这样的东西对你不起作用？

svg.selectAll(".bar")
    .data(data.chartData, function(d){return d.vNm;})
    .enter().append("rect")
    .attr("x", function(d) {
        return x(d.vNm);
    })
    .attr("width", sizeOfSpace)
    .attr("y", function(d) {
        return y(d.values.reduce(function(sum, d) {
            return sum + d.amount;
        }, 0));
    })
    .attr("height", function(d) {
        return height - y(d.values.reduce(function(sum, d) {
            return sum + d.amount;
        }, 0)); 
     })
    .attr("class", "bar")
    .on('mouseover', tip.show)
    .on('mouseout', tip.hide);

如果您的数据集很大，您显然可以优化代码。