Home/ Questions/Q 7617649
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T03:12:09+00:00

All- I am using the TreeMap example of D3 to try and dynamically update

  • 0

All-
I am using the TreeMap example of D3 to try and dynamically update it every 30 seconds via $.getJSON. I went to http://jsonlint.com/ to make sure my json was validated. I kick off the TreeMap with a local json string that immediately builds the TreeMap. However, I cannot figure out why when I go to update the treemap 30 seconds later via localhost, I get: [object Object],[object Object],[object Object],[object Object],[object Object],[object Object] from my json string instead of the newly updated text String. How can I change [object Object] to actual tokens that can repopulate and draw out a new table?
Many thanks in advance for taking a look.

        <!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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your current code is trying to use push() on the jdata object, which is not an array.

    I believe that you want to push the new json.children objects into the jdata.children array (untested)

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