d3 v5 树缩放、拖动和重置答案

【问题标题】：d3 v5 tree zoom, drag, and resetd3 v5 树缩放、拖动和重置
【发布时间】：2021-09-15 04:49:16
【问题描述】：

我正在使用 d3 版本 5 进行树形布局。我需要在树上添加缩放、平移、拖动和重置。我使用了以下内容：

this.svg = d3.select(this.chartContainer.nativeElement).append("svg")
    .attr("width", this.width + this.margin.right + this.margin.left)
    .attr("height", this.height + this.margin.top + this.margin.bottom)
    .call(d3.zoom().on("zoom", ()=> {
      this.svg.attr("transform", d3.event.transform)
    }))
    .append("g")
    .attr("transform", "translate("
          + this.margin.left + "," + this.margin.top + ")");

我可以使用鼠标滚轮进行缩放，拖放到树上。我无法用两根手指进行缩放。在重置时，它会恢复到原始状态。但是当我点击任何地方树移动到旧位置。我正在使用以下内容进行重置：

this.svg.transition().duration(750).attr("transform", d3.zoomIdentity.translate(this.margin.left, this.margin.top));

【问题讨论】：

标签： d3.js svg angular7

【解决方案1】：

我必须选择 g 而不是 svg 才能让我的缩放和平移以我想要的方式工作：

D3.select('svg')
      .call(D3.zoom()
        .scaleExtent([-5, 8])
        .extent([[0, 0], [300, 300]])
        .on('zoom', () => {

          D3.selectAll('g')
            .attr('transform', D3.event.transform);


          // this.svg.call(D3.zoom().transform, transform);
          if (has('root.children', this) && this.root.children.length > 50) {
            this.updateAfterInit(this.root);
          } else {
            this.updateAfterInit(this.root);
          }

          // this.centerNode(this.root);
        })
        .filter(() => {

          const foundNode = this.N.findNodeByID(D3.event.srcElement.id.split('_')[1])

          if ( !!foundNode && D3.event.type === 'dblclick' && foundNode.data.type === 'SearchRelationspec') {
            return false;
          } else {
            return !D3.event.target.classList.contains('drawarea') && D3.event.type === 'dblclick';
          }
        })

【讨论】：