Question

我正在尝试修改D3可折叠树布局，以便当我单击叶节点时，我还为该节点创建一个新子节点。如果我崩溃并重新扩展树，这个新孩子应该坚持下去，并且应该能够在将来的点击中拥有自己的孩子。

在下面的代码中，例如，如果我单击“animate”节点，然后单击其子节点“Transitioner”，我希望创建一个以“Transitioner”作为其父节点的新节点。

以下是我正在使用的布局代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>d3.chart.layout.hierarchy.tree.cartesian</title>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="https://rawgit.com/misoproject/d3.chart/master/d3.chart.min.js"></script>
    <script src="https://rawgit.com/bansaghi/d3.chart.layout.hierarchy/master/d3.chart.layout.hierarchy.js"></script>
    <style>
      html {
        display: table;
        margin: auto; }

      #vis {
        width: 960px;
        height: 500px; }

      .node {
        cursor: pointer; }

      .node circle {
        fill: #fff;
        stroke: steelblue;
        stroke-width: 1.5px; }

      .node text {
        font-size: 11px; }

      path.link {
        fill: none;
        stroke: #ccc;
        stroke-width: 1.5px; }
    </style>
  </head>
  <body>

    <div id="vis"></div>

    <script>
      (function() {

        function radius(d) {
          return Math.log(d.size);
        }

        d3.json("https://rawgit.com/bansaghi/d3.chart.layout.hierarchy/master/examples/data/flare.json", function(error, json) {

          var tree = d3.select("#vis").append("svg")

           .chart("tree.cartesian")

             .margin({ top: 0, right: 180, bottom: 0, left: 40 })
             //.radius(radius)
             .sort(function(a, b) { return d3.descending(a.size, b.size); })
             //.zoomable([0.1, 3])
             .collapsible(1)
             //.duration(200)
             ;

           tree.draw(json);
        });
      }());
    </script>
  </body>
</html>

单击时在D3树中创建新的子节点

0 个答案: