Question

我试图用d3.js绘制一个图表来实现节点之间的冲突。我尝试以下codigo.Pero不起作用。

如果我删除碰撞检测绘图但重叠节点......

<html>
  <head>
    <title>Demo</title>
    <script type="text/javascript" src="../d3.v2.js"></script>
    <script type="text/javascript" src="jquery-1.8.1.js"></script>
    <style type="text/css"> 
</style>  
  </head>
  <body>
    <script type="text/javascript">
      window.onload = function() {
        print();
      }

      function print(){
        var w = 960;
        var h = 500;
        var r = 20;
        var fill = d3.scale.category20();
        var force = d3.layout.force()
          .gravity(.01)
          .charge(-120)
          .linkDistance(30)
          .size([w, h]);
        var svg = d3.select("body")
          .append("svg")
          .attr("width", w)
          .attr("height", h);

        function() {
          d3.json("datos.json",
            function(json) {
              var nodes = svg.selectAll("circle")
                .data(json.nodes)
               .enter()
                .append("circle")
                .attr("r", r - .75)
                .style("fill", function(d) {return "#FF7F0E"})
                .style("stroke", function(d) { return "green"; })
                .style("stroke-width", function(d) { return "13px"; })
                .call(force.drag);
              force.nodes(json.nodes)
                .on("tick", tick)
                .start();
              var text = svg.append("g").selectAll("g")
                .data(force.nodes())
               .enter()
                .append("g") 
                .style("font-size", function(d) { return   "12px"; })
                .style("fill", function(d) { return   "red"; })
                .style("font-weight", function(d) { return   "bold"; });
              text.append("text")
                .attr("text-anchor", "middle")
                .attr("y", ".31em")
                .text(function(d) { return d.name; });

              function tick(e) {
                nodes.each(collide(.5))
                  .attr("cx", function(d) { return d.x; })
                  .attr("cy", function(d) { return d.y; });

            text.attr("transform", function(d) {
                    return "translate(" + d.x + "," + d.y + ")";});
              }

              function collide(alpha) {

                var quadtree = d3.geom.quadtree(nodes);

                return function(d) {
                  var ratio = r,
                    nx1 = d.x - ratio,
                    nx2 = d.x + ratio,
                    ny1 = d.y - ratio,
                    ny2 = d.y + ratio;
                  quadtree.visit(function(quad, x1, y1, x2, y2) {

                  if (quad.point && (quad.point !== d)) {

                    var x = d.x - quad.point.x,
                      y = d.y - quad.point.y,
                      l = Math.sqrt(x * x + y * y),
                      r = d.radius + quad.point.radius +
                               (d.color !== quad.point.color) * padding;
                    if (l < r) {
                      l = (l - r) / l * alpha;
                      d.x -= x *= l;
                      d.y -= y *= l;
                      quad.point.x += x;
                      quad.point.y += y;
                    }
                  }

                  return x1 > nx2
                        || x2 < nx1
                        || y1 > ny2
                        || y2 < ny1;
                  });
                };
              } 
            });
          })();
        }

        </script>
      </body>
    </html>

如果我删除碰撞检测工作但重叠节点。我需要帮助:(

d3.js与四叉树的碰撞检测

0 个答案: