$ .getJSON returns [object Object]

All- 我正在使用D3的TreeMap示例嘗試通過$ .getJSON每30秒動態更新它。我去http://jsonlint.com/，以確保我的JSON驗證。我用一個立即生成TreeMap的本地json字符串啓動TreeMap。但是，我不明白爲什麼當我通過localhost 30秒後更新樹形圖時，我得到：[object Object]，[object Object]，[object Object]，[object Object]，[object Object]，[object對象]從我的JSON字符串，而不是最新更新的文本字符串。如何將[object Object]更改爲可重新填充和繪製新表的實際令牌？非常感謝提前看看。

 <!DOCTYPE html> 
    <html> 
     <head> 
     <meta http-equiv="content-type" content="text/html;charset=utf-8"> 
     <title>Update Tree Map</title> 
     <link rel="Stylesheet" type="text/css" href="http://localhost:8080/dev_tests/d3/examples/treemap/treemap-svg.css" />  
     <script type="text/javascript" src="http://localhost:8080/dev_tests/d3/d3.js"></script> 
     <script type="text/javascript" src="http://localhost:8080/dev_tests/d3/d3.layout.js"></script> 

     <script type="text/javascript" src="http://localhost:8080/dev_tests/latest.jquery/jquery-latest.js"></script> 
     </head> 

     <body> 
    <div id="chart"> 

     <script type='text/javascript'> 

     var jdata = { 
     "children": [ 
      { 
       "name": "quant_mechanics", 
       "size": "1243" 
      }, 
      { 
       "name": "graph_theory", 
       "size": "4343" 
      }, 
      { 
       "name": "algebra", 
       "size": "1936" 
      }, 
      { 
       "name": "calc", 
       "size": "3936" 
      }, 
      { 
       "name": "geom", 
       "size": "2136" 
      }, 
      { 
       "name": "stats", 
       "size": "4136" 
      } 
     ] 
    }; 


     var w = 350, 
     h = 200, 
     color = d3.scale.category20c(); 

    var treemap = d3.layout.treemap() 
     .padding(4) 
     .size([w, h]) 
     .value(function(d) { return d.size; }); 

     var svg = d3.select("#chart").append("svg") 
     .style("position", "relative") 
     .style("width", w + "px") 
     .style("height", h + "px"); 

    redraw3(); 
    function redraw3() { 
     var cell = svg.data([jdata]).selectAll("g") 
      .data(treemap) 
     .enter().append("g") 
      .attr("class", "cell") 
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); 

     cell.append("rect") 
      .attr("width", function(d) { return d.dx; }) 
      .attr("height", function(d) { return d.dy; }) 
      .style("fill", function(d) { return d.children ? color(d.data.name) : null; }); 

     cell.append("text") 
      .attr("x", function(d) { return d.dx/2; }) 
      .attr("y", function(d) { return d.dy/2; }) 
      .attr("dy", ".35em") 
      .attr("text-anchor", "middle") 
      .text(function(d) { return d.children ? null : d.data.name; }); 
     } 




     var interval = setInterval(function() { 
     $.getJSON("http://localhost:8080/dev_tests/d3/examples/data/flare2.json", function(json) { 
      alert(json.children); 
      jdata.push({value: json.children}); 
      redraw3(); 
     }); 
     }, 30000); 

     </script> 
     </div> 
     </body> 
    </html>

來源

2012-03-10 Chris

閱讀：https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/ toString＃說明 – 2012-03-10 00:17:31

您當前的代碼試圖在jdata對象，這不是數組上使用push()。

我相信你想push新json.children對象爲jdata.children陣列（未經測試）

jdata.children.push(json.children)

來源

2012-03-10 00:43:07

感謝您的回覆。我仍然在alert中得到：[object Object]，[object Object]，[object Object]，[object Object]，[object Object]，[object Object]，並且treemap沒有更新其內容。如何將[object Object]轉換爲{「name」：「quant_mechanics」，「size」：「1243」}等。 – Chris 2012-03-10 01:48:24

如果您使用Firefox或Chrome，則可以使用'console.log（）'而不是'alert（）'。 – 2012-03-10 15:07:43

$ .getJSON returns [object Object]

回答

相關問題