脚本不能在本地工作，但在服务器上运行

我刚刚开始使用JavaScript，并且很好，我被卡住了，它也很尴尬。脚本不能在本地工作，但在服务器上运行

首先，我试图加载一个本地json文件，这将无法正常工作。我很快就发现了这一点。

但是，当我修复这个错误，它仍然无法正常工作。

我所做的基本上是http://bl.ocks.org/mbostock/4339083的一个副本，它在我的浏览器中工作，而我的尝试没有。

现在我有两个文件：

data.js

var json = 
{ 
    "name":"flare", 
    "children": 
    [ 
...

这让我有我的JSON准备，而不需要一个Web服务器

和我与一个HTML文件脚本：

<!DOCTYPE html> 
<meta charset="utf-8"> 
<style> 

    .node { 
     cursor: pointer; 
    } 

    .node circle { 
     fill: #fff; 
     stroke: steelblue; 
     stroke-width: 1.5px; 
    } 

    .node text { 
     font: 10px sans-serif; 
    } 

    .link { 
     fill: none; 
     stroke: #ccc; 
     stroke-width: 1.5px; 
    } 

</style> 
<body> 
<script src="https://d3js.org/d3.v4.min.js"></script> 
<script src="data.js"></script> 
<script> 
    alert("here"); 

    var margin = {top: 20, right: 120, bottom: 20, left: 120}, 
      width = 960 - margin.right - margin.left, 
      height = 800 - margin.top - margin.bottom; 

    var i = 0, 
      duration = 750, 
      root; 

    var tree = d3.layout.tree() 
      .size([height, width]); 

    var diagonal = d3.svg.diagonal() 
      .projection(function(d) { return [d.y, d.x]; }); 

    var svg = d3.select("body").append("svg") 
      .attr("width", width + margin.right + margin.left) 
      .attr("height", height + margin.top + margin.bottom) 
      .append("g") 
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

    alert("there"); 

    d3.json(json, function(error, flare) { 
     if (error) throw error; 

     root = flare; 
     root.x0 = height/2; 
     root.y0 = 0; 

     function collapse(d) { 
      if (d.children) { 
       d._children = d.children; 
       d._children.forEach(collapse); 
       d.children = null; 
      } 
     } 

     root.children.forEach(collapse); 
     update(root); 
    }); 

    d3.select(self.frameElement).style("height", "800px"); 

    function update(source) { 

     // Compute the new tree layout. 
     var nodes = tree.nodes(root).reverse(), 
       links = tree.links(nodes); 

     // Normalize for fixed-depth. 
     nodes.forEach(function(d) { d.y = d.depth * 180; }); 

     // Update the nodes… 
     var node = svg.selectAll("g.node") 
       .data(nodes, function(d) { return d.id || (d.id = ++i); }); 

     // Enter any new nodes at the parent's previous position. 
     var nodeEnter = node.enter().append("g") 
       .attr("class", "node") 
       .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; }) 
       .on("click", click); 

     nodeEnter.append("circle") 
       .attr("r", 1e-6) 
       .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }); 

     nodeEnter.append("text") 
       .attr("x", function(d) { return d.children || d._children ? -10 : 10; }) 
       .attr("dy", ".35em") 
       .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; }) 
       .text(function(d) { return d.name; }) 
       .style("fill-opacity", 1e-6); 

     // Transition nodes to their new position. 
     var nodeUpdate = node.transition() 
       .duration(duration) 
       .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; }); 

     nodeUpdate.select("circle") 
       .attr("r", 4.5) 
       .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }); 

     nodeUpdate.select("text") 
       .style("fill-opacity", 1); 

     // Transition exiting nodes to the parent's new position. 
     var nodeExit = node.exit().transition() 
       .duration(duration) 
       .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; }) 
       .remove(); 

     nodeExit.select("circle") 
       .attr("r", 1e-6); 

     nodeExit.select("text") 
       .style("fill-opacity", 1e-6); 

     // Update the links… 
     var link = svg.selectAll("path.link") 
       .data(links, function(d) { return d.target.id; }); 

     // Enter any new links at the parent's previous position. 
     link.enter().insert("path", "g") 
       .attr("class", "link") 
       .attr("d", function(d) { 
        var o = {x: source.x0, y: source.y0}; 
        return diagonal({source: o, target: o}); 
       }); 

     // Transition links to their new position. 
     link.transition() 
       .duration(duration) 
       .attr("d", diagonal); 

     // Transition exiting nodes to the parent's new position. 
     link.exit().transition() 
       .duration(duration) 
       .attr("d", function(d) { 
        var o = {x: source.x, y: source.y}; 
        return diagonal({source: o, target: o}); 
       }) 
       .remove(); 

     // Stash the old positions for transition. 
     nodes.forEach(function(d) { 
      d.x0 = d.x; 
      d.y0 = d.y; 
     }); 
    } 

    // Toggle children on click. 
    function click(d) { 
     if (d.children) { 
      d._children = d.children; 
      d.children = null; 
     } else { 
      d.children = d._children; 
      d._children = null; 
     } 
     update(d); 
    } 

</script>

你可以看到它现在基本上是1：1的副本。

虽然我打开该.html文件，但我的页面保持空白。

这怎么可能？我明白，如果我试图通过d3.json加载本地.json文件，会发生这种情况，因为它会尝试执行http请求，如果没有Web服务器来处理它，将会失败。

但现在json数据保存在一个变量中，这种行为对我来说没有任何意义。

请赐教！我现在想弄清楚这一点。

来源

2016-07-14 Sorona

你得到任何错误在控制台中？ – ochi

你确定“data.js”在服务器上吗？ – durbnpoisn

@durbnpoisn我没有服务器运行。对于教程中的服务器：不，这会产生ajax请求，这很明显，因为服务器处理http。 – Sorona

d3.json(url[, callback])使用默认MIME类型application/json在指定的URL处创建对JSON文件的请求。在你的代码中，你传递的是JSON对象而不是URL。请试试这个：

d3.json(json, function(error, flare)

，并从指定jsondata.json到root：

//d3.json(json, function(error, flare) { <-- this will be removed 
//if (error) throw error; <-- remove this too not needed ! 
root = json; 
root.x0 = height/2; 
root.y0 = 0; 

function collapse(d) { 
    if (d.children) { 
     d._children = d.children; 
     d._children.forEach(collapse); 
     d.children = null; 
    } 
} 
root.children.forEach(collapse); 
update(root); 
//} <-- don't forget the closing brace.

来源

2016-07-14 20:46:04

正如@Sorona所说，他们试图避免提出AJAX请求。解决方法是只执行'var flare = json;'，然后运行代码，否则这些代码会在'd3.json'的回调中生效。 – smarx

这是没有意义的，所以他可以使用'json'而不是'flare'！！@smarx –

替换此：

d3.json(json, function(error, flare) { 
    if (error) throw error; 

    root = flare; 
    root.x0 = height/2; 
    root.y0 = 0; 

    function collapse(d) { 
     if (d.children) { 
      d._children = d.children; 
      d._children.forEach(collapse); 
      d.children = null; 
     } 
    } 

    root.children.forEach(collapse); 
    update(root); 
});

与此：

var flare = json; 

root = flare; 
root.x0 = height/2; 
root.y0 = 0; 

function collapse(d) { 
    if (d.children) { 
     d._children = d.children; 
     d._children.forEach(collapse); 
     d.children = null; 
    } 
} 

root.children.forEach(collapse); 
update(root);

来源

2016-07-14 20:56:45 smarx

无论如何都有重复的答案！我根据你的评论更新了我的答案，这已经足够了！无论如何.... –

你能否详细说明为什么这是必要的？ – Sorona

@IsmailRBOUH对不起，我发布这个后，你的回复我认为你不会编辑:-( – smarx

脚本不能在本地工作，但在服务器上运行

回答

相关问题