在d3中以编程方式将特定节点的实心链接更改为虚线链接

图形类型

放射状整齐的树

电流输出

最初,我从服务器的JSON响应开始,并进行递归,以使JSON平坦并使用 d3.tree 绘制下图。

我已经把程序设定好了 Legislation 节点,双击它会将一些信息发送到后端,并获得一个新的JSON,该JSON要求重新提交图形。

重新命名后,节点将更改为 Manufacturer/Legislation 如下所示:

正如图中所示,我希望建立这种特殊的联系 strokedashed 指示特定节点已更改。

密码

为了简洁起见,我将在这里删去代码:

ngAfterViewInit(): void {
        const self = this;
        const svg = d3.select('svg'),
            width = +svg.attr('width'),
            height = +svg.attr('height'),
            g = svg.append('g').attr('transform', 'translate(' + (width / 3 + 240) + ',' + (height / 3 + 140) + ')');

        const tree = d3.tree()
            .size([2 * Math.PI, 375])
            .separation(function(a, b) { return (a.parent === b.parent ? 1 : 2) / a.depth; });
        const root = tree(d3.hierarchy(this.parse_node(this.config['viewStructure'])));
        this.root = root; // store this is private variable
        const link = g.selectAll('.link')
            .data(root.links())
            .enter().append('path')
            .attr('class', 'link')
            .attr('d', <any>d3.linkRadial()
                .angle(function(d) { return d['x']; })
                .radius(function(d) { return d['y']; }));

        const 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', click)
            .on('dblclick', dblclick);

        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)];
        }

     // For brevity removed the click and double click logic..
    }

重渲染功能

getProperties() {
  // .... Some logic
  const self = this;
  function askExtension() {
            // call the backend, get the json response
            // rerender with some latency here..
            setTimeout(() => {
                d3.selectAll('svg > *').remove();
                self.ngAfterViewInit();
                console.log(nodeInfo.parent.data.name + '/' + nodeInfo.data.name); // `Manufacturer/Legislation`

               // I can use self.root here to find the node 
               // how do I get the link information here and change
              
            }, 1000);
        }
}

我试着用 .forEach() 环游世界 self.root.descendants() 发现 制造商/法规 ,并使用 .links() 但这不符合我的目的。

如何在渲染后以编程方式将特定链接设为虚线?