腳本不能在本地工作，但在服務器上運行

我剛剛開始使用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

腳本不能在本地工作，但在服務器上運行

回答

相關問題