我有一个系统，可以从外部JSON文件生成D3js图表。一切都很好我的开发服务器机器＆amp;图表显示在客户端。
我现在已将文件移动到实时服务器，windows 2008 r2，我遇到了麻烦。显示背景SVG元素，但没有上覆元素，例如表示数据的轴和条。
注意：客户端未禁用JavaScript。数据集中的值只是占位符，实际值由json.data文件确定。
有没有人遇到过类似的问题？ 查看此链接，您可以在其中查看文件：Plunker example
的index.html
<script>
var data = [
{key: "desiccant_1", value: 17},
{key: "desiccant_2", value: 9 },
{key: "desiccant_3", value: 8 },
{key: "desiccant_4", value: 12 },
{key: "desiccant_5", value: 10 },
{key: "desiccant_6", value: 7 },
{key: "laser_1", value: 12 },
{key: "laser_2", value: 10 },
{key: "laser_3", value: 10 },
{key: "laser_4", value: 11 },
{key: "laser_5", value: 9 },
{key: "laser_6", value: 13},
{key: "table_top_1", value: 10},
{key: "table_top_2", value: 11},
{key: "RMI", value: 12},
{key: "Miscellaneous", value: 12}
];
var w = 800;
var h = 550;
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 threshold = 16.5;
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");
// Second Y Axis
var yAxis2 = d3.svg.axis()
.scale(y)
.orient("right");
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("EA/ LW");
// limit line
this.append("line")
.attr("x1", 0)
.attr("y1", y(threshold))
.attr("x2", width)
.attr("y2", y(threshold))
.attr("stroke-width", 4)
.attr("stroke", "yellow");
// 2nd y
this.append("g")
.classed("y axis", true)
.attr("transform", "translate(" + width + ",0)")
.call(yAxis2);
}
d3.json('data.json', function(data) {
plot.call(chart, {data: data});
});
</script>
json.data
[
{
"key": "desiccant_1",
"value": "5.00"
},
{
"key": "desiccant_2",
"value": "2.00"
},
{
"key": "desiccant_3",
"value": "0.00"
},
{
"key": "desiccant_4",
"value": "6.00"
},
{
"key": "desiccant_5",
"value": "0.00"
},
{
"key": "desiccant_6",
"value": "0.00"
},
{
"key": "laser_1",
"value": "0.00"
},
{
"key": "laser_2",
"value": "0.00"
},
{
"key": "laser_3",
"value": "0.00"
},
{
"key": "laser_4",
"value": "5.00"
},
{
"key": "laser_5",
"value": "0.00"
},
{
"key": "laser_6",
"value": "0.00"
},
{
"key": "table_top_1",
"value": "2.00"
},
{
"key": "table_top_2",
"value": "0.00"
},
{
"key": "RMI",
"value": "1.00"
},
{
"key": "Miscellaneous",
"value": "0.00"
}
]
答案 0 :(得分：0)
我的问题是服务器上没有配置.json扩展名。我按照以下网址中的步骤进行操作。一切都很好，谢谢大家的意见。 http://www.uipress.com/add-json-handler-support-in-iis-7/