Question

清一色我使用D3的TreeMap示例尝试通过$ .getJSON每30秒动态更新一次。我去了http://jsonlint.com/以确保我的json已经过验证。我用一个立即构建TreeMap的本地json字符串启动TreeMap。但是，我无法弄清楚为什么当我30秒后通过localhost更新树形图时，我得到：[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>

Answer 1

您当前的代码正在尝试在jdata对象上使用push()，该对象不是数组。

我相信您希望push新json.children个对象进入jdata.children数组（未经测试）

jdata.children.push(json.children)

$ .getJSON返回[object Object]

1 个答案: