Question

我在加载我的页面时使用ajax调用查询数据库以获取json数据，并且在成功返回时我调用下面的更新函数。但是当json数据第一次出现时，节点之间没有形成链接需要每次手动刷新页面

这是我通过查询数据库

形成的json

{"nodes":[{"survey_name":null,"x":100,"y":250,"fixed":true,"question_pkey":0,"survey_pkey":0,"survey_type":0,"question":null,"question_type":0,"ordinal":0,"next_question_pkey":0,"tgId":0,"node_name":"Start"},{"survey_name":"SLinear","x":200,"y":250,"fixed":true,"question_pkey":47,"survey_pkey":6,"survey_type":1,"question":null,"question_type":1,"ordinal":1,"next_question_pkey":1,"tgId":16,"node_name":"c"}],"links":[{"source":0,"target":1}]}

这是包含我的更新功能的脚本

function update(json){          
         var force = d3.layout.force()
         .charge(-120)
         .distance(80)
         .gravity(.1)
         .nodes(json.nodes)
         .links(json.links)
         .size([w, h])
         .start();


       var link = vis.selectAll('line.link')
           .data(json.links)
           .enter().append('svg:line')
           .attr("class", function (d) { console.log("link"); return "link"; })
           .style('stroke-width', 3)
           .attr("x1", function (d) { console.log("source x---"+d.source.x); return d.source.x; })
           .attr("y1", function (d) { console.log("source y---"+d.source.y); return d.source.y; })
           .attr("x2", function (d) { console.log("target x---"+d.target.x); return d.target.x; })
           .attr("y2", function (d) { console.log("target y---"+d.target.y); return d.target.y; })
       ;//This link section doesnt work at first time and no link is formed between my nodes

       var node = vis.selectAll("circle.node")
           .data(json.nodes)
           .enter().append("svg:circle")
           .attr("class", "node")
           .attr("cx", function (d) { return d.x; })
           .attr("cy", function (d) { return d.y; })
           .attr("r", 7)
            .style("fill","steelblue")
            .on("click", click);

       var nodetext = vis.selectAll("text.label")
           .data(json.nodes)
           .enter().append("svg:text")
           .attr("class", "label")
          // .attr("fill", "red")
           .attr("x", "-5")
           .attr("dy", ".35em")
           .text(function (d) { return d.node_name; });

       node.append('svg:title')
           .text(function (d) { return d.name; });

       force.on("tick", function (e) {
        console.log("tick");

           //force.tick();
           force.stop();

           k = -4 * e.alpha;
           link.each(function (d) {
               //k=k+1;
               d.source.y -= k;
               d.target.y += k;
           });

           link.attr("x1", function (d) { return d.source.x; })
               .attr("y1", function (d) { return d.source.y; })
               .attr("x2", function (d) { return d.target.x; })
               .attr("y2", function (d) { return d.target.y; });

          var y=0;

           node.attr("cx", function (d) { return d.x; })
               .attr("cy", function (d) {y=d.y; return d.y; });

            console.log("y--"+y);
           nodetext.attr("transform", function (d) {

               return "translate(" + (d.x-10) + "," + (d.y+17) + ")";
           });

       });
      }

并且在控制台检查器中，svg由只包含第一个节点详细信息的链接元素组成。

请帮助我......我无法弄清楚为什么会发生这种情况

第一次加载时无法在节点之间形成链接

0 个答案: