يُرجع $.getJSON [كائن الكائن]

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

  •  10-12-2019
  •  | 
  •  

سؤال

All- أنا أستخدم مثال Treemap لـ D3 لمحاولة تحديثه ديناميكيًا كل 30 ثانية عبر $ .getjson.ذهبت إلى http://jsonlint.com/ للتأكد من التحقق من صحة json الخاص بي.أبدأ TreeMap بسلسلة json محلية تعمل على إنشاء TreeMap على الفور.ومع ذلك، لا يمكنني معرفة السبب الذي يجعلني أحصل على ما يلي عندما أقوم بتحديث المخطط الهيكلي بعد 30 ثانية عبر المضيف المحلي:[كائن كائن]،[كائن كائن]،[كائن كائن]،[كائن كائن]،[كائن كائن]،[كائن كائن] من سلسلة json الخاصة بي بدلاً من السلسلة النصية المحدثة حديثًا.كيف يمكنني تغيير [كائن الكائن] إلى الرموز الفعلية التي يمكنها إعادة ملء جدول جديد ورسمه؟شكرا جزيلا مقدما لإلقاء نظرة.

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