D3jS报告和D3jS代码的JSON数据结构

Question

我正在尝试从JSON数据

获得以下报告

var data = [{"MonthYearShortName":"2014-09-13T00:00:00","Product":"Deposits","Actual":330393232.5,"Forecast":495589848.75,"Target":495589848.75},{"MonthYearShortName":"2014-09-13T00:00:00","Product":"Fee Based","Actual":111868709.42,"Forecast":167803064.13,"Target":167803064.13},{"MonthYearShortName":"2014-09-13T00:00:00","Product":"Lending","Actual":18146873.33,"Forecast":27220309.995,"Target":27220309.995}]

我不确定这是否是正确的数据结构。如果我选择了错误的结构来创建报告，那么一些帮助就会很棒。

我使用以下代码生成报告。

<div id="ReportContent" runat="server" style="border: 1px solid #58595d; border: 1px solid rgba(88, 89, 93, .3);"><svg></svg></div>    
function ChartCreate() {
                var color = d3.scale.linear()
                    .domain([0, d3.max(data, function (d) { return d.Target; })]) //change
                    .range(["#f3c40e", "#7d6507"]);

                var width = 420,
                    margin = 100, //add
                    barHeight = 20;

                var x = d3.scale.linear()
                    .domain([0, d3.max(data, function(d) { return d.Actual; })]) //change
                    .range([0, width]);

                var chart = d3.select('#ReportContent_ReportContent svg')
                    .attr("width", width + margin)
                    .attr("height", barHeight * data.length);

                var bar = chart.selectAll("g")
                    .data(data, function(d) { return d.Actual; })
                    .enter().append("g")
                    .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });

                bar.append("rect")
                    .attr("width", function(d) { return x(d.Actual); }) //change
                    .attr("height", barHeight) //change
                    .attr("fill", function(d) { return color(d.Actual); }); //change

                bar.append("text")
                    .attr("text-anchor", "start") //add
                    .attr("x", function(d) { return x(d.Actual); }) //change
                    .attr("y", barHeight / 2)
                    .attr("dy", ".35em")
                    .text(function(d) { return d.Product; });
            }