$.getJSONは[オブジェクトオブジェクト]を返します

StackOverflow https://stackoverflow.com//questions/9642686

  •  10-12-2019
  •  | 
  •  

質問

すべて- 私はD3のTreeMapの例を使用して、$を介して30秒ごとに動的に更新しようとしています。ゲットソン私はに行ってきました http://jsonlint.com/ 私のjsonが検証されたことを確認します。私はすぐにTreeMapを構築するローカルjson文字列でTreeMapをキックオフします。しかし、localhostを介して30秒後にtreemapを更新すると、なぜ私が得るのか理解できません:新しく更新されたテキスト文字列の代わりに、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>
役に立ちましたか？

解決

あなたの現在のコードは使用しようとしています push() 上の jdata 配列ではないオブジェクト。

私はあなたがしたいと信じています push 新しい json.children へのオブジェクト jdata.children 配列(テストされていない)

jdata.children.push(json.children)
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top