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

这是一个工作小提琴：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);

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

创建条形值作为值的总和

1 个答案: