2012-03-10 9 views
1

All- Я использую пример TreeMap для D3, чтобы динамически обновлять его каждые 30 секунд через $ .getJSON. Я пошел в http://jsonlint.com/, чтобы убедиться, что мой json был подтвержден. Я запускаю TreeMap с помощью локальной строки json, которая сразу же создает TreeMap. Однако я не могу понять, почему, когда я иду обновлять treemap через 30 секунд через localhost, я получаю: [object Object], [object Object], [object Object], [object Object], [object Object], [object Object] из моей строки json вместо недавно обновленного текста String. Как я могу изменить объект [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

чтение: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/ toString # Описание –

ответ

1

Ваш текущий код пытается использовать push() на jdata объект, который не является массивом.

Я считаю, что вы хотите, чтобы push новых json.children объектов в jdata.children массив (непроверенный)

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

Спасибо за ваш ответ. Я все еще получаю: [object Object], [Object Object], [Object Object], [Object Object], [Object Object], [Object Object] в предупреждении, и treemap не обновляет его содержимое. Как я могу преобразовать объект [object Object] в {"name": "quant_mechanics", "size": "1243"} и т. Д.? – Chris

+0

Если вы используете Firefox или Chrome, вы можете использовать 'console.log()' вместо 'alert()'. –

Смежные вопросы