javascript – D3.js在svg中间粘贴父对象

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript – D3.js在svg中间粘贴父对象，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3153字，纯文字阅读大概需要5分钟。

内容图文

我修改了Collapsible Force Layout http://mbostock.github.io/d3/talk/20111116/force-collapsible.html示例：

……现在看起来像这样

所有圆圈现在都可以拖动.我想在svg的中间贴中间圆圈(蓝色圆圈).可能吗？谢谢.

<script>

    var width = 960,
        height = 600,
        root;

    var force = d3.layout.force()
        .linkDistance(175)
        .charge(-200)
        .gravity(0)
        .size([width, height])
        .on("tick", tick);

    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);

    var link = svg.selectAll(".link"),
        node = svg.selectAll(".node");

    d3.json("graph.json", function(error, json) {
      root = json;
      update();
    });

    function update() {
      var nodes = flatten(root),
          links = d3.layout.tree().links(nodes);

      // Restart the force layout.
      force
          .nodes(nodes)
          .links(links)
          .start();

      // Update links.
      link = link.data(links, function(d) { return d.target.id; });

      link.exit().remove();

      link.enter().insert("line", ".node")
          .attr("class", "link");

      // Update nodes.
      node = node.data(nodes, function(d) { return d.id; });

      node.exit().remove();

      var nodeEnter = node.enter().append("g")
          .attr("class", "node")
          .on("click", click)
          .call(force.drag)
          .attr("href", function(d) { return d.link; });

    nodeEnter.append("svg:a")
      .attr("xlink:href", function(d){return d.link;})
      .append("circle")
          .attr("r", function(d) { return Math.sqrt(d.size) / 10 || 4.5; });

      nodeEnter.append("text")
          .attr("dy", ".35em")
          .text(function(d) { return d.name; });

      node.select("circle")
          .style("fill", color);
    }

    function tick() {
      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; });

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

    function color(d) {
      return d._children ? "#3182bd" // collapsed package
          : d.children ? "#2F9BC1" // expanded package
          : "#fd8d3c"; // leaf node
    }

    // Toggle children on click.
    function click(obj) {
      if (d3.event.defaultPrevented) return; // ignore drag
      if (d.children) {
        d._children = d.children;
        d.children = null;
      } else {
        d.children = d._children;
        d._children = null;
      }
      update();
    }

    // Returns a list of all nodes under the root.
    function flatten(root) {
      var nodes = [], i = 0;

      function recurse(node) {
        if (node.children) node.children.forEach(recurse);
        if (!node.id) node.id = ++i;
        nodes.push(node);
      }

      recurse(root);
      return nodes;
    }

    </script>

json文件：

{
     "name": "Me", "size": 200000, "link": "http://google.com",
     "children": [
      {"name": "Person 01", "size": 150000, "link": "http://google.com"},
      {"name": "Person 02", "size": 150000, "link": "http://yahoo.com"},
      {"name": "Person 03", "size": 150000, "link": "http://youtube.com"},
      {"name": "Person 04", "size": 150000, "link": "http://twitter.com"},
      {"name": "Person 05", "size": 150000, "link": "http://facebook.com"}
     ]
 }

解决方法:

您需要做的是在将其坐标设置为中心后将相关节点的固定属性设置为true(参见the documentation),

nodes.forEach(function(d) {
   if(d._children || d.children) {
     d.x = width/2, d.y = height/2;
     d.fixed = true;
   }
});

立即在更新功能的开始.

如果您还要禁用该节点的拖动,则可以执行此操作

nodeEnter.filter(function(d) {
           return d.children === undefined && d._children === undefined;
         })
         .call(force.drag);

而不是在所有节点上调用force.drag.完成示例here.

内容总结

以上是互联网集市为您收集整理的javascript – D3.js在svg中间粘贴父对象全部内容，希望文章能够帮你解决javascript – D3.js在svg中间粘贴父对象所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端