d3.js - 根据节点是选中还是未选中来更改 d3.js 中的对角线/链接颜色

Question

我正在研究 d3.js。我的代码如下：

https://jsfiddle.net/g543kxoh/

js fiddle中的代码如下

const treeData = {
  "id": 1,
  "name": "Root",
  "checked": false,
  "color": "white",
  "children": [
    {
      "id": 2,
        "name": "Leaf A",
      "checked": false,
      "color": "red",
        "children": [
        {
          "id": 3,
          "name": "A - 1",
                "checked": false,
          "color": "brown",
          }, 
        {
          "id": 4,
          "name": "A - 2",
          "checked": false,
          "color": "orange",
          },
        {
          "id": 5,
          "name": "A - 3",
                "checked": false,
          "color": "yellow",
          },
      ]
    }, 
    {
      "id": 6,
        "name": "Leaf B",
      "checked": false,
      "color": "green",
        "children": [
        {
          "id": 7,
          "name": "B - 1",
          "checked": false,
          "color": "#00ff40",
          }, 
        {
          "id": 8,
          "name": "B - 2",
          "checked": false,
          "color": "#00ff80",
          }
      ]
    }
  ]  
};

const margin = {
    top: 20,
    right: 120,
    bottom: 20,
    left: 120
  };
  
const width = 600 - margin.right - margin.left;
const height = 400 - margin.top - margin.bottom;

var i = 0,duration = 750;
  
const tree = d3.layout.tree()
  .size([height, width]);

const diagonal = d3.svg.diagonal()
  .projection(function(d) {
    return [d.y, d.x];
  });


const svg = d3.select("body").append("svg")
  .attr("width", width + margin.right + margin.left)
  .attr("height", height + margin.top + margin.bottom);
  
const container = svg.append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

const root = treeData;
root.x0 = height / 2;
root.y0 = 0;

// Collapse after the second level
root.children.forEach(collapse);

update(root);

// Collapse the node and all it's children
function collapse(d) {
  if (d.children) {
    d._children = d.children
    d._children.forEach(collapse)
    d.children = null
  }
}

function update(source) {
  // Compute the new tree layout.
  const nodes = tree.nodes(root).reverse();
  const links = tree.links(nodes);

  // Normalize for fixed-depth.
  nodes.forEach(function(d) {
    d.y = d.depth * 200;
  });

  // Update the nodes…
  const node = container.selectAll("g.node")
    .data(nodes, d => d.id);

  // Enter any new nodes at the parent's previous position.
  var nodeEnter = node.enter()
    .append("g")
    .attr("class", "node")
    .attr("transform", d => `translate(${source.y0},${source.x0})`)
    .on("click", onClickNode);

  nodeEnter.append("circle")
    .attr("r", 10)
    .style("fill", d => d.color);

  nodeEnter.append("text")
    .attr("x", 20)
    .attr("dy", 4)
    .attr("text-anchor", "start")
    .text(d => d.name);
    
  nodeEnter.append('foreignObject')
    .attr('width', '20')
    .attr('height', '20')
    .attr("x", -30)
    .attr("y", -8)
    .append('xhtml:input')
    .attr('type', 'checkbox')
    .attr("id", d => `checkbox-${d.id}`)
    .on("click", onClickCheckbox)

  // Transition nodes to their new position.
  var nodeUpdate = node.transition()
    .duration(duration)
    .attr("transform", function(d) {
      return "translate(" + d.y + "," + d.x + ")";
    });

  // ???
  nodeUpdate.select("circle")
    .style("stroke", 'black');
  nodeUpdate.each(function(d) {
    const cb = d3.select(this).select('[type="checkbox"]').node();
    cb.checked = d.checked;
    cb.disabled = isParentChecked(d);
  });
    
  nodeUpdate.select("text")
    .style("fill-opacity", 1);

  // Transition exiting nodes to the parent's new position.
  const nodeExit = node.exit().transition()
    .duration(duration)
    .attr("transform", function(d) {
      return "translate(" + source.y + "," + source.x + ")";
    })
    .remove();

  nodeExit.select("circle")
    .attr("r", 0);

  nodeExit.select("text")
    .style("fill-opacity", 0);

  // Update the links…
  var link = container.selectAll("path.link")
    .data(links, d => d.target.id);

  // Enter any new links at the parent's previous position.
  link.enter().insert("path", "g")
    .attr("class", "link")
    .attr("stroke-width", 1)
    .attr("d", function(d) {
      var o = {
        x: source.x0,
        y: source.y0
      };
      return diagonal({
        source: o,
        target: o
      });
    })
    .attr("opacity", "0.3")
    .style("stroke", 'black');

  // Transition links to their new position.
  link.transition()
    .duration(duration)
    .attr("d", diagonal);

  // Transition exiting nodes to the parent's new position.
  link.exit().transition()
    .duration(duration)
    .attr("d", function(d) {
      var o = {
        x: source.x,
        y: source.y
      };
      return diagonal({
        source: o,
        target: o
      });
    })
    .remove();

  // Stash the old positions for transition.
  nodes.forEach(function(d) {
    d.x0 = d.x;
    d.y0 = d.y;
  });
}

function findParent(datum) {
  if (datum.depth < 2) {
    return datum.name
  } else {
    return findParent(datum.parent)
  }
}

function findParentLinks(datum) {
  if (datum.target.depth < 2) {
    return datum.target.name
  } else {
    return findParent(datum.target.parent)
  }
}

const checkNode = (d, checked, byParent) => {
  if (d.id === 2)
    console.log('CHECK TO: ', checked);
  d.checked = checked;
  const children = d.children || d._children;
  if (children)
    children.forEach(child => checkNode(child, checked, true));
    
  if (!byParent && checked && d.parent) {
    console.log('UNCHECK SIBLINGS');
    
    const siblings = d.parent.children || d.parent._children;
    
    siblings.forEach(sibling => {
      if (sibling.id !== d.id) {
        console.log('UNCHECK: ', sibling)
        checkNode(sibling, false, true);
      }
    });
    
  }  
  
}

function isParentChecked (d) {
  if (!d.parent) {
    return false;
  }
  if (d.parent.checked) {
    return true;
  }
  return isParentChecked(d.parent);
}

function onClickCheckbox(d) {
  d3.event.stopPropagation();
    checkNode(d, d3.event.target.checked, false);
  console.log('ROOT: ', root);
  update(root);   
}


// Toggle children on click.
function onClickNode(d) {
  if (d.children) {
    d._children = d.children;
    d.children = null;
  } 
  else {
    d.children = d._children;
    d._children = null;
  }
  update(d);
}



.node {
  cursor: pointer;
}

.node circle {
  fill: #fff;
  stroke: #C0C0C0;
  stroke-width: 1.5px;
}

.node text {
  font: 10px sans-serif;
}

.link {
  fill: none;
  stroke: #C0C0C0;
  stroke-width: 1.5px;
}

我想根据节点检查与否检查箭头和边框颜色。

1. 如果节点被选中，那么我想要一条如下图所示的线。不确定我们在 d3.js 中如何称呼它（对角线或链接）。

.

目前我有灰色法线，如小提琴所示。但是一旦节点被选中，我希望所有选中的节点都与线连接，如附图所示。节点的边框颜色也应该

2. 如果未选中节点，那么我想要对角线/链接连接节点，如附图所示

.

在这种情况下，节点的边框颜色也应该与未选中的对角线/链接的颜色相同

我怎样才能做到这一点？

标签： d3.js

Answer 1

根据标记链接的标准，执行以下操作：

  // Transition links to their new position.
  link
    .style('stroke', d => d.target.checked ? 'blue' : 'gray')
    .transition()
    .duration(duration)
    .attr("d", diagonal);

如果要为选中节点的链接着色，或者：

  link
    .style('stroke', d => d.source.checked ? 'blue' : 'gray')
    .transition...

如果您想为已检查父母的链接着色。

在小提琴中看到它。

更新：添加彩色点：

  nodeEnter.append('circle')
    .classed('child-link-point', true)
    .attr('cx', 10)
    .attr('r', 4);
  nodeEnter.append('circle')
    .classed('parent-link-point', true)
    .attr('cx', -10)
    .attr('r', 4);

  ...

  nodeUpdate.select('.child-link-point')
    .style('visibility', d => d.children ? 'visible' : 'hidden')
    .style('fill', d => d.checked ? 'blue' : 'gray')
    .style('stroke', d => d.checked ? 'blue' : 'gray');
    
  nodeUpdate.select('.parent-link-point')
    .style('visibility', d => d.parent ? 'visible' : 'hidden')
    .style('fill', d => (d.parent || {}).checked ? 'blue' : 'gray')
    .style('stroke', d => (d.parent || {}).checked ? 'blue' : 'gray');