Question

我有一个强制导向图，其中包含多个black彩色图形节点和一些red个节点。当我点击某个节点时，我的代码应该将节点的笔触颜色变为#2291b97a，但保留red和black的节点。

我根据以下某些条件转换节点red：

d3.select("svg").selectAll("g.node").each(function(d) {
            if(d == bpOperation) {
                this.firstChild.style = "stroke: red; stroke-width: 3"; 
                }
            });

我的代码将点击的节点的颜色更改为＃2291b97a，但将其余节点的边框变为black - 甚至是red。

svg.selectAll('g.node')
.every(element => element
        .every(g => (g.firstChild.classList.contains('on')) ? g.firstChild.classList.remove("on") : "true"));


//add on class   
this.firstChild.classList.add("on");

//if it contains an on class set colour to #2291b97a else check if the 
//stroke is red
svg.selectAll('g.node')
.every(element => element
        .every(g => (g.firstChild.classList.contains('on')) ? this.firstChild.style = "stroke: #2291b97a; stroke-width: 3" : ((g.firstChild.style = "stroke: red; stroke-width: 3"==true) ? g.firstChild.style = "stroke: red; stroke-width: 3" : g.firstChild.style = "stroke: black; stroke-width: 2")));

在这一行中，我检查样式是否设置为red。如果是red，我会再次将其设置为red，否则我将其设置为black

((g.firstChild.style = "stroke: red; stroke-width: 3"==true) ? g.firstChild.style = "stroke: red; stroke-width: 3" : g.firstChild.style = "stroke: black; stroke-width: 2"));

由于某种原因，这个语句(g.firstChild.style = "stroke: red; stroke-width: 3"==true)总是返回false，当我检查在调试模式下实际保存的内容时，我看到red彩色节点的笔划样式是一个空字符串“”即使在屏幕上我可以看到它红色。

那么如何访问我更改过的笔划属性？我甚至正确地改变了颜色吗？

Answer 1

我正在应用内联样式，它在属性列表中显示一个空字符串，因为我从未在第一时间设置它。

我不得不替换这一行

this.firstChild.style = "stroke: red; stroke-width: 3";

这一行

this.firstChild.setAttribute('style','stroke: red; stroke-width: 3;');

同样在其他函数中获取属性，如

(g.firstChild.getAttribute('style') == "stroke: red; stroke-width: 3;")

为什么我设置的d3笔划样式在调试器中显示为空字符串，但在屏幕上显示为红色？如何访问笔触样式？

1 个答案: