如何根据动态变化的文本来操作节点？ (enter/exit/update)

Question

我正在使用 d3.js 强制布局。现在，借助动态变化的数组 data 可以根据数组动态突出显示节点。此外，使用下面的代码，我能够动态显示节点的名称，这些节点是数组的一部分，作为文本。

因此，当数组具有例如 3 个条目时，则会显示 3 个节点，并且还会显示 3 个节点名称。假设他们的名字是 "a"、"b"、"c"，那么文本 "a"、"b"、"c" 会出现在屏幕上。现在，当我单击新出现的文本 "a" 时，我希望包含该名称的节点被填充为绿色。我用名为 specialfunction 的函数尝试了这个。问题是，当我点击时所有节点都变成绿色在文本 "a" 上。你们中有人可以帮忙吗？谢谢

 var texts = svg.selectAll(".texts")
        .data(data);


    textsExit = texts.exit().remove();

    textsEnter = texts.enter()
        .append("text")
        .attr("class", "texts");

    textsUpdate = texts.merge(textsEnter)
        .attr("x", 10)
        .attr("y", (d, i) => i * 16)
        .text(d => d.name)
        .on("click", specialfunction);

  function specialfunction(d) { 


         node.style("fill", function(d){ return this.style.fill = 'green';});

             };

Answer 1

现在，您的 specialFunction 函数仅采用 nodes 选择并将其所有元素的样式设置为...

的返回值

this.style.fill = 'green';

...也就是说，猜猜是什么，"green"。

取而代之，filter 根据点击文本的节点：

function specialFunction(d) {
    nodes.filter(function(e) {
        return e === d
    }).style("fill", "forestgreen")
}

在这个简单的演示中，d 是文本和圆圈的数字。只需将我的演示中的 d 更改为 d.name 或您想要的任何其他属性。点击文字对应的圆圈会变色：

var svg = d3.select("svg");
var data = d3.range(5);
var nodes = svg.selectAll(null)
  .data(data)
  .enter()
  .append("circle")
  .attr("cy", 50)
  .attr("cx", function(d) {
    return 30 + d * 45
  })
  .attr("r", 20)
  .style("fill", "lightblue")
  .attr("stroke", "gray");

var texts = svg.selectAll(null)
  .data(data)
  .enter()
  .append("text")
  .attr("y", 88)
  .attr("x", function(d) {
    return 26 + d * 45
  })
  .attr("fill", "dimgray")
  .attr("cursor", "pointer")
  .text(function(d) {
    return d
  })
  .on("click", specialFunction);

function specialFunction(d) {
  nodes.filter(function(e) {
    return e === d
  }).style("fill", "forestgreen")
}

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>

编辑：回答你的，这个更简单的函数可以将圆圈设置为原始颜色：

function specialFunction(d) {
    nodes.style("fill", function(e){
        return e === d ? "forestgreen" : "lightblue"; 
    })
}

这是演示：

var svg = d3.select("svg");
var data = d3.range(5);
var nodes = svg.selectAll(null)
  .data(data)
  .enter()
  .append("circle")
  .attr("cy", 50)
  .attr("cx", function(d) {
    return 30 + d * 45
  })
  .attr("r", 20)
  .style("fill", "lightblue")
  .attr("stroke", "gray");

var texts = svg.selectAll(null)
  .data(data)
  .enter()
  .append("text")
  .attr("y", 88)
  .attr("x", function(d) {
    return 26 + d * 45
  })
  .attr("fill", "dimgray")
  .attr("cursor", "pointer")
  .text(function(d) {
    return d
  })
  .on("click", specialFunction);

function specialFunction(d) {
  nodes.style("fill", function(e){
  return e === d ? "forestgreen" : "lightblue"; 
  })
}

<script src="https://d3js.org/d3.v4.min.js"></script>
    <svg></svg>

如何根据动态变化的文本来操作节点？ (enter/exit/update)

How to manipulate nodes based on dynamicaly changing text? (enter/exit/update)

javascript

arrays

d3.js

force-layout