Question

我试图通过突出显示树中的“选定”节点，以及根据是否显示类似于正/负的图标，让用户更直观地表示他们在树中的位置。孩子们都出现了。

我似乎无法找到关于如何执行此操作的任何地方，因为看起来在扩展后重绘树时，所选节点信息已消失，无法对其执行操作。目前我的树节点基于隐藏/显示或没有任何子节点突出显示，但我想跟踪哪个节点已用填充颜色点击。我的树是基于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;
}

Answer 1

仅仅因为示例代码＆＃34;忘记＆＃34;选定的节点，并不意味着您无法自行添加：

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

这里是example。

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

1 个答案: