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

Change selected nodes style, d3.js collapsible indented tree

本文关键字：js d3 可折叠 缩进 样式 节点      更新时间：2023-09-26

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

我似乎找不到如何做到这一点的任何地方，因为似乎一旦在扩展后重新绘制树，所选节点信息就会消失，无法对其采取行动。 目前，我的树节点根据隐藏/显示或没有任何子节点突出显示，但我想用填充颜色跟踪单击了哪个节点。 我的树基于Mbostock的区块#1093025。 任何帮助都将不胜感激加号/减号图标切换，以及突出显示所选节点。

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

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

下面是一个示例。

相关文章：