用D3示例标记节点和边缘方向

Question

我正在尝试修改此处D3示例（https://bl.ocks.org/mbostock/1062288）中的代码，以直观地显示边缘方向和节点文本。但是到目前为止，我还没有完成，甚至没有删除节点。下面是我玩的代码。

我认为生成svg的方式不正确，因此无法显示我想要的内容。对不起，我的JavaScript技术。谢谢

var w = 1280,
  h = 800,
  node,
  link,
  root;

var force = d3.layout.force()
  .on("tick", tick)
  .charge(function(d) {
    return d._children ? -d.size / 100 : -30;
  })
  .linkDistance(function(d) {
    return d.target._children ? 80 : 30;
  })
  .size([w, h - 160]);

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

d3.json("https://raw.githubusercontent.com/d3/d3-hierarchy/master/test/data/flare.json", function(json) {
  root = json;
  root.fixed = true;
  root.x = w / 2;
  root.y = h / 2 - 80;
  update();
});

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

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

  // Update the links…
  link = vis.selectAll("line.link")
    .data(links, function(d) {
      return d.target.id;
    });

  // Enter any new links.
  link.enter().insert("svg:line", ".node")
    .attr("class", "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;
    });

  // Exit any old links.
  link.exit().remove();

  // Update the nodes…
  node = vis.selectAll("circle.node")
    .data(nodes, function(d) {
      return d.id;
    });
  //.style("fill", color);

  node.transition()
    .attr("r", function(d) {
      return d.children ? 4.5 : Math.sqrt(d.size) / 10;
    });


  // Enter any new nodes.
  var nodeEnter = node.enter().append("g")
    .attr("class", "node")
    .on("click", click)
    .call(force.drag);

  nodeEnter.append("circle")
    .attr("cx", function(d) {
      return d.x;
    })
    .attr("cy", function(d) {
      return d.y;
    })
    .attr("r", function(d) {
      return d.children ? 4.5 : Math.sqrt(d.size) / 10;
    })
    .style("fill", color)
    .attr("r", function(d) {
      return Math.sqrt(d.size) / 10 || 4.5;
    });

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

  // Exit any old nodes.
  node.exit().remove();
}

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("cx", function(d) {
      return d.x;
    })
    .attr("cy", function(d) {
      return d.y;
    });
}

// Color leaf nodes orange, and packages white or blue.
function color(d) {
  return d._children ? "#3182bd" : d.children ? "#c6dbef" : "#fd8d3c";
}

// Toggle children on click.
function click(d) {
  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.size = node.children.reduce(function(p, v) {
      return p + recurse(v);
    }, 0);
    if (!node.id) node.id = ++i;
    nodes.push(node);
    return node.size;
  }

  root.size = recurse(root);
  return nodes;
}

.node {
  cursor: pointer;
  stroke: #3182bd;
  stroke-width: 1.5px;
}

.link {
  fill: none;
  stroke: #9ecae1;
  stroke-width: 1.5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>