2012-03-10 7 views
1

All- D3의 TreeMap 예제를 사용하여 30 초마다 $ .getJSON을 통해 동적으로 업데이트하려고합니다. 내 json의 유효성을 확인하기 위해 http://jsonlint.com/에갔습니다. TreeMap을 즉시 빌드하는 로컬 json 문자열로 TreeMap을 시작합니다. 그러나, 왜 30 초 후에 localhost를 통해 트리 맵을 업데이트해야하는지 알 수 없습니다. [object 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> 
+0

읽기에 새 json.children 객체를 push하려는 생각 toString # 설명 –

답변

1

현재 코드는 배열되지 않습니다 jdata 객체에 push()를 사용하려고합니다. https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/ :

나는 당신이 (안된)에 jdata.children 배열

jdata.children.push(json.children) 
+0

답장을 보내 주셔서 감사합니다. 나는 여전히 [object object], [object object], [object object], [object object], [object object], [object Object]를 경고에 포함하고 있으며 트리 맵은 내용을 업데이트하지 않습니다. [object object]를 { "name": "quant_mechanics", "size": "1243"} 등으로 변환하려면 어떻게해야합니까? – Chris

+0

Firefox 또는 Chrome을 사용하는 경우'alert()'대신'console.log()'를 사용할 수 있습니다. –

관련 문제