如何基于动态更改文本来操作节点？ （进入/退出/更新） [英] How to manipulate nodes based on dynamicaly changing text? (enter/exit/update)

问题描述

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

I am using d3.js with the force layout. Now, with the help of the dynamically changing array data it is possible to highlight nodes dynamically based on the array. Also with the code below i am able to show up dynamically the names of the nodes, which are part of the array, as a text.

所以，当数组有例如3个条目，然后显示3个节点，并且还出现3个节点名称。假设他们的名字是a，b，c，所以文字a，b，c出现在屏幕上。
现在，当我点击新出现的文本a时，我希望包含该名称的节点填充为绿色。我尝试使用名为 specialfunction 的函数。问题是，当我点击文本a上的
时，所有节点都会填充绿色。你们中的某些人可以帮忙吗？谢谢。

So, when the array has for example 3 entries, then 3 nodes are shown up and also 3 names of the nodes appear. Let's say their names are "a", "b", "c", so the text "a", "b", "c" appears on screen. Now, when i click on the new appeared text "a", then i want the node, which contains that name, to be filled green. I tried this with the function called specialfunction. The problem is, that all nodes fill green when i click on the text "a". Can someone of you guys maybe help? Thanks.

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

             };

推荐答案

现在，您的 specialFunction 函数只选择节点选择并将其所有元素的样式设置为返回值...

Right now, your specialFunction function is only taking the nodes selection and setting the style of all its elements to the returned value of...

this.style.fill = 'green';

......猜猜是什么，绿色。

... which is, guess what, "green".

而不是那个，过滤根据点击文字的节点：

Instead of that, filter the nodes according to the clicked text:

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

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

In this simple demo, d is the number for both texts and circles. Just change d in my demo to d.name or any other property you want. Click the text and the correspondent circle will change colour:

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>

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

Answering your comment, this even simpler function can set the circles to the original colour:

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>

这篇关于如何基于动态更改文本来操作节点？ （进入/退出/更新）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！