使用外部 JSON 文件填充 D3 图表

Question

我创建了一个 D3 图表。当前填充图表的数据位于同一 html 页面上。今后，此图表的数据将由外部 JSON 文件填充。 JSON 由输入到表单中的值创建。当我尝试用 d3.json 函数替换“硬编码”数据时，我完全破坏了图表，有人能指出我哪里出错了吗？当前文件：

Chart.html

<script>
var data = [
    {key: "ING_SW_CB",      value: 10 },
    {key: "SB_SW_CB",            value: 9 },
    {key: "NG3_SW_CB",       value: 8 },
    {key: "Mould_Close",        value: 12 },
    {key: "Leak_Test",          value: 10 },
    {key: "ML_Load",            value: 7 },
    {key: "Pre_Heat",           value: 12 },
    {key: "Dispense",           value: 10 },
    {key: "A310",                   value: 10 },
    {key: "Gelation",               value: 11 },
    {key: "Platen",                 value: 9 },
    {key: "Mainline_Unload",  value: 13},
    {key: "De_mould",           value: 10},
    {key: "Clean_Up",           value: 11},
    {key: "Soda_Blast",             value: 12},
    {key: "Miscellaneous",       value: 12}
];
var w = 800;
var h = 450;
var margin = {
top: 58,
bottom: 100,
left: 80,
right: 40
};
var width = w - margin.left - margin.right;
var height = h - margin.top - margin.bottom;

var x = d3.scale.ordinal()
    .domain(data.map(function(entry){
        return entry.key;
    }))
    .rangeBands([0, width],.2);
var y = d3.scale.linear()
    .domain([0, d3.max(data, function(d){
        return d.value;
    })])
    .range([height, 0]);
var xAxis = d3.svg.axis()   
                  .scale(x)
                  .orient("bottom");
var yAxis = d3.svg.axis()
                  .scale(y)
                  .orient("left");
var yGridLines = d3.svg.axis()
                         .scale(y)
                         .tickSize(-width, 0, 0)
                         .tickFormat("")
                         .orient("left");
var svg = d3.select("body").append("svg")
        .attr("id", "chart")
        .attr("width", w)
        .attr("height", h);
var chart = svg.append("g")
        .classed("display", true)
        .attr("transform", "translate(" + margin.left + "," + margin.top +           ")");

function plot(params){
this.append("g")
     .call(yGridLines)
     .classed("gridline", true)
     .attr("transform", "translate(0,0)")
this.selectAll(".bar")
    .data(params.data)
    .enter()
        .append("rect")
        .classed("bar", true)
        .attr("x", function (d,i){
            return x(d.key);
        })
        .attr("y", function(d,i){
            return y(d.value);
        })
        .attr("height", function(d,i){
            return height - y(d.value);
        })
        .attr("width", function(d){
            return x.rangeBand();
        });
this.selectAll(".bar-label")
    .data(params.data)
    .enter()
        .append("text")
        .classed("bar-label", true)
        .attr("x", function(d,i){
            return x(d.key) + (x.rangeBand()/2)
        })
        .attr("dx", 0)
        .attr("y", function(d,i){
            return y(d.value);
        })
        .attr("dy", -6)
        .text(function(d){
            return d.value;
        })
this.append("g")
     .classed("x axis", true)
     .attr("transform", "translate(" + 0 + "," + height + ")")
     .call(xAxis)
            .selectAll("text")
                .style("text-anchor", "end")
                .attr("dx", -8)
                .attr("dy" ,8)
                .attr("transform", "translate(0,0) rotate(-45)");

this.append("g")
     .classed("y axis", true)
     .attr("transform", "translate(0,0)")
     .call(yAxis);

this.select(".y.axis")
    .append("text")
    .attr("x", 0)
    .attr("y", 0)
    .style("text-anchor", "middle")
    .attr("transform", "translate(-50," + height/2 + ") rotate(-90)")
    .text("Downtime [Hrs]");

this.select(".x.axis")
    .append("text")
    .attr("x", 0)
    .attr("y", 0)
    .style("text-anchor", "middle")
    .attr("transform", "translate(" + width/2 + ",80)")
    .text("[Stations]");    
    // title 
this.append("text")
    .attr("x", (width / 2))             
    .attr("y", 0 - (margin.top / 2))
    .attr("text-anchor", "middle")  
    .style("font-size", "16px") 
    .style("text-decoration", "underline")  
    .text("Over Mould");    
}
plot.call(chart, {data: data});
</script>

我想用这个外部 JSON 文件替换 "data" 变量：

[
  [
    {
        "key": "ING_SW_CB",
        "value": "5"
    },
    {
        "key": "SB_SW_CB",
        "value": "5"
    },
    {
        "key": "NG3_SW_CB",
        "value": "5"
    },
    {
        "key": "Mould_Close",
        "value": "5"
    },
    {
        "key": "Leak_Test",
        "value": "5"
    },
    {
        "key": "ML_Load",
        "value": "5"
    },
    {
        "key": "Pre_Heat",
        "value": "5"
    },
    {
        "key": "Dispense",
        "value": "5"
    },
    {
        "key": "A310",
        "value": "5"
    },
    {
        "key": "Gelation",
        "value": "5"
    },
    {
        "key": "Platen",
        "value": "5"
    },
    {
        "key": "Mainline_Unload",
        "value": "5"
    },
    {
        "key": "De_mould",
        "value": "5"
    },
    {
        "key": "Clean_Up",
        "value": "5"
    },
    {
        "key": "Soda_Blast",
        "value": "5"
    },
    {
        "key": "Miscellaneous",
        "value": "5"
    }
  ]
]

非常感谢您抽出宝贵时间，我在最后期限前完成了这项工作 & 运行！

Answer 1

您的 json 文件格式不正确。嵌套过多：

[
  [
   ...
  ]
]

参见：http://plnkr.co/edit/QDiAgFfPpRoXRdvexREF?p=preview

Answer 2

以下URL将帮助您检查JSON的有效性。 http://jsonlint.com/

使用外部 JSON 文件填充 D3 图表

Populating D3 chart with external JSON file

javascript

json

d3.js