Javascript 更改选定节点样式，d3.js可折叠缩进树

我试图通过突出显示树中的“选定”节点，以及根据是否显示子节点，显示一个类似于加号/减号的图标，让用户更直观地表示他们在树中的位置

我似乎找不到任何关于如何执行此操作的地方，因为在展开之后，一旦树被重新绘制，所选节点信息就会消失，并且无法对其执行操作。当前，我的树节点根据隐藏/显示的子节点或没有子节点而高亮显示，但我想跟踪使用填充颜色单击的节点。我的树是以姆博斯托克的街区1093025为基础的。对于加号/减号图标切换，以及突出显示所选节点，任何帮助都将不胜感激

nodeEnter.append("rect")
    .attr("y", newy)
    .attr("height", newheight)
    .attr("width", barWidth)
    .style("fill", color)
    .on("click", click);

function newy(d) {
    if (d._isSelected)
        return -barHeight / 1.25;
    else
        return -barheight/2;
}
function newheight(d) {
    if (d._isSelected)
        return barHeight * 1.75;
    else
        return barheight;
}

显示展开/折叠图标的当前代码：

nodeEnter.append("svg:image")
    .attr("xlink:href", function(d) {
        if (d._children) return "images/arrow_right.png";
        else if (d.children) return "images/arrow_left.png";
    })
    .attr("x", "-12px")
    .attr("y", "-10px")
    .attr("width", 15)
    .attr("width", 20);

用于放大所选节点的函数，以及用于调整大小的函数。。。根本无法让它们工作，也无法让它识别重画上的选定节点。似乎只有填充才能识别所选节点

nodeEnter.append("rect")
    .attr("y", newy)
    .attr("height", newheight)
    .attr("width", barWidth)
    .style("fill", color)
    .on("click", click);

function newy(d) {
    if (d._isSelected)
        return -barHeight / 1.25;
    else
        return -barheight/2;
}
function newheight(d) {
    if (d._isSelected)
        return barHeight * 1.75;
    else
        return barheight;
}

---

仅仅因为示例代码“忘记”了所选节点，并不意味着您不能自己添加它：

// Toggle children on click.
var lastClickD = null;
function click(d) {
  if (d.children) {
    d._children = d.children;
    d.children = null;
  } else {
    d.children = d._children;
    d._children = null;
  }
  if (lastClickD){
    lastClickD._isSelected = false;
  }
  d._isSelected = true;
  lastClickD = d;
  update(d);
}

// on the selected one change color to red
function color(d) {
  if (d._isSelected) return 'red';
  return d._children ? "#3182bd" : d.children ? "#c6dbef" : "#fd8d3c";
}

要添加展开/折叠指示器，只需根据其子状态更新重画上的节点：

// we used to set the text on enter
nodeEnter.append("text")
  .attr("dy", 3.5)
  .attr("dx", 5.5); 

// but now we change it on update based on children
node.select('text') 
  .text(function(d) { 
    if (d.children) {
      return '+' + d.name;
    } else if (d._children) {
      return '-' + d.name;
    } else {
      return d.name;
    }
  });

---

这是一个。

你好，马克，谢谢你的帮助！第一部分做得很好。对于第二部分，我目前正在使用以下内容：Hi@Mark，谢谢你的帮助！第一部分做得很好。对于第二部分，我在每个节点的左侧附加了一个图像，但是使用哪个（加号/减号）的逻辑不起作用。以下是我目前正在使用的：

code

nodeEnter.append（“svg:image”）.attr（“xlink:href”，函数（d）{if（d.)children）返回“images/arrow_right.png”；else（d.children）返回“images/arrow_left.png”}）；我也没能得到你的例子？它是空的。嗨@Mark我有根级别，然后是5个节点，每个节点都有不同级别的子节点。如果我单击根下的第一个父节点展开，折叠它，它将保持红色，正如预期的那样，但是当我单击根下的第二个父节点并展开它的子节点时，父节点1和2现在都是红色的……有没有办法只将一个且只有一个节点显示为红色，这将是最后一个被单击的节点？提前感谢。@DavidFigura，首先，将来，在您的问题中包含相关代码。我对它进行了编辑，以包含您刚刚发布的代码片段。第二，我不知道为什么我的链接是空的，它在我这边起作用。第三，您的图像代码不起作用，因为您只在

enter

选项上执行，而不是在

update

选项上执行。在我的回答中，请参阅我如何对

节点

而不是

节点

采取行动。第四，我的突出显示代码按照您的描述工作。我猜您在将其合并到代码中时遗漏了一些内容。用你的特定代码更新我的plunker或创建一个你自己的新plunker，否则我猜。