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

径向整齐的树

电流输出 最初，我从服务器的JSON响应开始，执行递归以使JSON平坦，并使用

d3.tree

绘制下图

我已经对

Legislation

节点进行了编程，这样双击它就会将一些信息发送到后端，并获得一个新的JSON，该JSON需要重新提交图形。

重新招标后，节点将更改为

制造商/法规

，如下所示：

如图中所示，我希望使该特定链接

strokedsmash

表示该特定节点已更改

代码 为简洁起见，我将在此处删除代码：

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..
    }

我尝试使用

.forEach（）

循环遍历

self.root.subjections（）

，查找

制造商/立法

，并使用

.links（）

函数，但这不符合我的目的

---

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

如果我正确理解您的问题，您可以使用类似于节点颜色的样式函数

本质上，当您合并节点时，设置类或某些属性以允许您区分它。然后可以有条件地设置样式

link.style('stroke-dasharray', function(d){ if(d.data['someprop'] === 'valueForMerged'){
  return ("10,3");
}
else{
  return undefined;
}

文章对此作了进一步解释

---

此外，还解释了笔划数组。本质上，dasharray格式是“像素打开，像素关闭”。

Woah！好极了作为一个测试用例，我尝试了：

link.style（'stroke-dasharray'，function（d）{if（d['target']['data']['name']==='Manufacturer/Legislation'{return（'10,3'）；}否则{return undefined；}

而且它工作得很好。我正在寻找一些参数，可以使这个过程自动化。为了澄清，你的意思是你正在寻找一个通用的测试来查找更改的分支吗？是的。这就是我正在寻找的。我目前正在使用当前节点的名称+直接父节点的名称来检查是否存在合并节点在图表中

link.style('stroke-dasharray', function(d){ if(d.data['someprop'] === 'valueForMerged'){
  return ("10,3");
}
else{
  return undefined;
}