Question

我正在构建一个根据其特征将不同节点链接在一起的应用程序。 [来自Neo4j]和前端设置[D3]的数据结构如下：

graph.nodes有4个属性：

1）id（String）

2）name（String）

3）type（String）

4）属性（对象）

如果属性有多个属性，但对于这个问题，我们只考虑＆＃39; properties.represents＆＃39;

因此，当我点击一个节点时，我希望所有其他节点具有相同的属性。表示＆＃39;改为相同的颜色（在这种情况下是蓝色）。

我尝试使用的具体代码是：

 getRep = n.properties.represents;

 graph.nodes.forEach(function(d) {
                    if (d.properties.represents == getRep) {
                        d3.select(d).style('fill', 'blue');
                    }
                });

然而，这是不正确的。控制台输出以下错误消息：

未捕获的TypeError：无法读取属性＆＃39; setProperty＆＃39;未定义的

有关为什么不起作用的任何建议？感谢您的时间，非常感谢。

    var link = svg.selectAll(".link")
            .data(graph.links).enter()
            .append("line").attr("class", "link");

    var node = svg.selectAll(".node")
            .data(graph.nodes).enter()
            .append("circle")
            .attr("class", function (d) { console.log("Represents: " + d.properties.represents); return "node "+ d.type.toString() })
            .attr("r", radius)
            .style("fill", function(d) {return d.colr; })
            .call(force.drag);

    // html title attribute
    node.append("title")
            .text(function (d) { return d.name; })

    var state = false;
    var last = null;
    var current = null;
    node.on("click", function(n)
            {

                var metainf = "";
                currRepresents = n.properties.represents;
                metainf = metainf.concat("Title: ", n.name, "<br/>Label: ", n.type);
                console.log(metainf);
                d3.select("#metainfo")
                    .html(metainf);

                last = current;
                current = d3.select(this);
                current.style('fill', 'red');
                last.style('fill', function(d) { return d.colr; });

                getRep = n.properties.represents;

                graph.nodes.forEach(function(d) {
                    if (d.properties.represents == getRep) {
                        d3.select(d).style('fill', 'blue');
                    }
                });
            });

Answer 1

您无法按其数据选择元素。但是，您可以过滤选择：

svg.selectAll(".node")
   .filter(function(d) { return d.properties.represents == getRep; })
   .style('fill', 'blue');

如何从onClick更改多个SVG节点的颜色

1 个答案: