Pergunta

Todos- Eu estou usando o TreeMap exemplo de D3 para tentar atualizar dinamicamente-lo a cada 30 segundos através de $.getJSON.Eu fui para http://jsonlint.com/ para se certificar de que a minha json foi validado.Eu iniciar o TreeMap com um local json seqüência de caracteres que imediatamente cria o TreeMap.No entanto, gostaria de saber por que quando eu vou atualizar o mapa em árvore de 30 segundos mais tarde, através de localhost, eu recebo:[object object],[object object],[object object],[object object],[object object],[object object] da minha json seqüência de caracteres em vez de o recém-atualizado Seqüência de caracteres de texto.Como posso alterar [object object] reais de tokens que podem repovoar e desenhar um novo quadro?Muito obrigado antecipadamente para dar uma olhada.

        <!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>
Foi útil?

Solução

O código atual está tentando usar push() no jdata o objeto, que não é uma matriz.

Eu acredito que você deseja push o novo json.children objetos para o jdata.children matriz (não testado)

jdata.children.push(json.children)
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top