我创建了一张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>
我希望替换＆＃34;数据＆＃34; var使用此外部JSON文件：
[
[
{
"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"
}
]
]
我真的很感谢你的时间，我正处在最后期限之内。运行！