d3.js tree 删除节点

要删除D3.js树中的节点，可以使用`selection.remove()`方法。该方法用于从DOM中删除选定的元素。在D3.js中，首先要选择要删除的节点，然后调用`remove()`方法。下面是一个示例代码，演示如何删除D3.js树中的节点：

// 选择要删除的节点
const nodeToRemove = D3.select('.node-to-remove');

// 删除节点
nodeToRemove.remove();

在这个示例中，我们首先使用`D3.select()`选择要删除的节点，然后调用`remove()`方法将其从DOM中删除。请注意，你需要替换`.node-to-remove`为你实际要删除的节点的选择器。

引用：
d3可与快速选择批量的节点。类似jquery一样可选择元素并更改其属性值。选择节点并设置属性。
不像document.querySelectAll一样返回一个数组，再遍历移除。d3链式调用作用于其选中的集合。这也是我感觉比较好的地方。d3.tree。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>

相关问题

d3.js绘制树图结构节点直接连线如何实现代码实现

要用到d3.js库中的布局功能，具体来说是树状布局（tree layout）。具体的代码实现可以参考以下示例：

var margin = {top: 20, right: 120, bottom: 20, left: 120},
    width = 960 - margin.right - margin.left,
    height = 800 - margin.top - margin.bottom;

var tree = d3.layout.tree()
    .size([height, width]);

var diagonal = d3.svg.diagonal()
    .projection(function(d) { return [d.y, d.x]; });

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.right + margin.left)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var root = {
  "name": "A",
  "children": [
    {
      "name": "B",
      "children": [
        { "name": "C" },
        { "name": "D" }
      ]
    },
    {
      "name": "E",
      "children": [
        { "name": "F" },
        { "name": "G" }
      ]
    }
  ]
};

var nodes = tree.nodes(root),
    links = tree.links(nodes);

var link = svg.selectAll(".link")
    .data(links)
    .enter().append("path")
    .attr("class", "link")
    .attr("d", diagonal);

var node = svg.selectAll(".node")
    .data(nodes)
    .enter().append("g")
    .attr("class", "node")
    .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })

node.append("circle")
    .attr("r", 4.5);

node.append("text")
    .attr("dx", function(d) { return d.children ? -8 : 8; })
    .attr("dy", 3)
    .style("text-anchor", function(d) { return d.children ? "end" : "start"; })
    .text(function(d) { return d.name; });

这个示例其实就是一个非常简单的树状结构，但是可以看到节点和节点之间是通过直线相连接的。具体来说，需要用到d3.layout.tree()这个函数进行树状布局，再用到d3.svg.diagonal()这个函数来定义连接线的路径，最后通过d3.selectAll()以及.data()等函数将节点和线条加入进去即可。需要注意的是，在节点连接线这一部分的代码当中，attr函数中的参数d以及diagonal函数中的参数d都表示一个节点在树状结构中的位置，需要根据实际情况加以理解。

vue结合D3.js并实现D3.js官网的IndentedTree的效果，数着显示

首先，你需要安装D3.js和Vue.js的依赖。在Vue.js的组件中，你可以通过引入D3.js的库来创建Indented Tree的效果。

在模板中，你可以创建一个div元素，用于渲染D3.js的Indented Tree。你可以使用Vue.js的生命周期函数，在组件加载后调用D3.js的API来创建Indented Tree。

下面是代码示例：

<template>
  <div ref="tree"></div>
</template>

<script>
import * as d3 from 'd3';

export default {
  mounted() {
    this.createTree();
  },
  methods: {
    createTree() {
      // 获取数据
      const data = {
        name: 'Root',
        children: [
          {
            name: 'Child 1',
            children: [
              { name: 'Grandchild 1' },
              { name: 'Grandchild 2' },
            ],
          },
          {
            name: 'Child 2',
            children: [
              { name: 'Grandchild 3' },
              { name: 'Grandchild 4' },
            ],
          },
        ],
      };

      // 创建Indented Tree
      const margin = { top: 20, right: 90, bottom: 30, left: 90 };
      const width = 960 - margin.left - margin.right;
      const height = 500 - margin.top - margin.bottom;

      const svg = d3.select(this.$refs.tree)
                  .append('svg')
                  .attr('width', width + margin.right + margin.left)
                  .attr('height', height + margin.top + margin.bottom)
                  .append('g')
                  .attr('transform', `translate(${margin.left},${margin.top})`);

      const root = d3.hierarchy(data);
      const treeLayout = d3.tree().size([height, width]);
      const treeData = treeLayout(root);

      const link = svg.selectAll('.link')
                    .data(treeData.descendants().slice(1))
                    .enter()
                    .append('path')
                    .attr('class', 'link')
                    .attr('d', d => {
                      return `M ${d.y},${d.x}
                              C ${(d.y + d.parent.y) / 2},${d.x}
                                ${(d.y + d.parent.y) / 2},${d.parent.x}
                                ${d.parent.y},${d.parent.x}`;
                    });

      const node = svg.selectAll('.node')
                    .data(treeData.descendants())
                    .enter()
                    .append('g')
                    .attr('class', 'node')
                    .attr('transform', d => `translate(${d.y},${d.x})`);

      node.append('circle').attr('r', 5);

      node.append('text')
          .attr('dx', d => (d.children ? -8 : 8))
          .attr('dy', 3)
          .attr('text-anchor', d => (d.children ? 'end' : 'start'))
          .text(d => d.data.name);
    },
  },
};
</script>

在上面的代码中，我们首先定义了一些参数，如边距、宽度和高度。然后，我们使用D3.js的API来创建了一个SVG元素，并将其附加到组件的DOM元素上。接下来，我们使用D3.js的tree布局来计算树的坐标，并创建链接和节点元素，最后将它们附加到SVG元素上。

这是一个简单的实现D3.js官网Indented Tree效果的例子，你可以根据自己的需求进行修改和扩展。