D3JS图表未正确渲染在客户端上，D3源代码存储在服务器上

Question

我有一个系统，该系统是从外部JSON文件生成D3JS图表的。在我的开发服务器机器上一切都很好。图表显示在客户端。

我现在将文件移至实时服务器Windows 2008 R2，并且遇到了麻烦。显示背景SVG元素，但上覆的元素都不是，例如代表数据的轴和条。

注意：JavaScript在客户端上未禁用。数据集中的值只是占位符，实际值由json.data文件确定。

有人遇到了类似的问题吗？ 查看此链接，您可以在其中查看文件：plunker示例

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"
    }
]

Answer 1

我的问题是.json扩展名未在服务器上配置。我在下面的URL上遵循了步骤＆amp;一切都很好，谢谢大家的投入。http://www.uipress.com/add-jsonhandler-support-in-iis-7/