D3.js V4 和 Angular 不会发生节点转换

我在用角度打字稿 with D3.js V.4.12我特别使用整齐的径向树 https://bl.ocks.org/mbostock/4063550用于代表产品。

初始步骤

随着ng-cli，我安装了npm install --save d3并创建了一个组件来显示信息。

可视化如下图所示：

各自的组成部分如下：

树诊断组件.ts

import { Component, OnInit, ViewEncapsulation} from '@angular/core';
import * as d3 from 'd3';
import { ont, ont_highchair } from '../fd-ontology/ontology';
import { recursionParse, ontNode } from './model/recursion';
export class leaf {
  name: string;
  url: string;
  color: string;
  children: leaf[] = [];
}

@Component({
  selector: 'app-treediag',
  templateUrl: './treediag.component.html',
  styleUrls: ['./treediag.component.css'],
  encapsulation: ViewEncapsulation.None
})

export class TreediagComponent implements OnInit {
  prop = {name: 'test'};
  constructor() {
  }

  ngOnInit() {
    var i = 0,
    duration = 750, root;
    var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    g = svg.append("g").attr("transform", "translate(" + (width / 2 + 40) + "," + (height / 2 + 90) + ")");

    var tree = d3.tree()
    .size([2 * Math.PI, 400])
    .separation(function(a, b) { return (a.parent == b.parent ? 1 : 10) / a.depth; });

    root = tree(d3.hierarchy(this.parse_node(ont_highchair.completeStructure)));
    // root.children.forEach(collapse);
    // update(root);
    var link = g.selectAll(".link")
    .data(root.links())
    .enter().append("path")
      .attr("class", "link")
      .attr("d", d3.linkRadial()
          .angle(function(d) { return d.x; })
          .radius(function(d) { return d.y; }));

    var node = g.selectAll(".node")
          .data(root.descendants())
          .enter().append("g")
            .attr("class", function(d) { return "node" + (d.children ? " node--internal" : " node--leaf"); })
            .attr("transform", function(d) { return "translate(" + radialPoint(d.x, d.y) + ")"; })
            .on("click", (d) => click(d))
            .on("dblclick", (d) => dblclick(d));

            node.append("circle")
              .attr("r", 5)
              .style("fill", (d) => {
                if (d.data.color === 'green') {
                  return '#0f0';
                } else {
                  if (d.depth === 0) {
                    return '#999';
                  }
                  return '#f00';
                }
              });

          node.append("text")
              .attr("dy", "0.31em")
              .attr("x", function(d) { return d.x < Math.PI === !d.children ? 6 : -6; })
              .attr("text-anchor", function(d) { return d.x < Math.PI === !d.children ? "start" : "end"; })
              .attr("transform", function(d) { return "rotate(" + (d.x < Math.PI ? d.x - Math.PI / 2 : d.x + Math.PI / 2) * 180 / Math.PI + ")"; })
              .text(function(d) { return d.data.name; });


    function radialPoint(x, y) {
          return [(y = +y) * Math.cos(x -= Math.PI / 2), y * Math.sin(x)];
    }

    /* PROBLEM HERE*/
    function click(d) {
        d3.select(this).select("circle").transition()
            .duration(750)
            .attr("r", 16);
    }
    /* PROBLEM HERE */
    function dblclick(d) {
      console.log(d.data);
      d3.select(this).select("circle").transition()
        .duration(750)
        .attr("r", 6);
    }
}

this.parse_node()只是一个函数，它接受一个JSON来自服务器的响应并扁平化层次结构。

我在用.transistion()到节点上，这样单击节点将增加节点半径，双击会将半径减小回标准大小。

我没有在控制台中检索到任何错误，并通过以下方式正确获取节点的信息console.log()调用这两个函数。

然而我觉得奇怪的是浏览器检查器显示相同g组件被生产两次。也许这可能是一个问题，但我没有看到点击时发生任何转换。

当您像这样设置点击处理程序时：

.on("click", (d) => click(d))

粗箭头表示法保留了上下文this，所以它指的是你的类的实例。

不过，你的处理程序：

function click(d) {
    d3.select(this).select("circle").transition()
        .duration(750)
        .attr("r", 16);
}

正在期待this成为g被点击了。

因此，设置您的处理程序，如下所示：

.on("click", click)