D3.js v4树形图：实现叶子节点Score值的滑块修改与数据同步

要实现通过滑块修改选中叶子节点的score并同步到原始JSON数据，我们需要添加选中节点跟踪、滑块值同步和数据持久化更新三个核心逻辑。以下是具体实现步骤：

1. 准备滑块DOM元素 #

首先确保页面中存在用于控制score的滑块和值显示元素（如果还没有的话）：

<div id="scoreSlider">
  <p>选中叶子节点调整Score: <span id="currentScore">--</span></p>
  <input type="range" id="scoreRange" min="0" max="10" step="1" value="0">
</div>

2. 添加全局变量跟踪选中节点 #

在代码顶部添加变量，用于记录当前选中的叶子节点：

let selectedLeafNode = null; // 跟踪当前选中的叶子节点

3. 修改节点点击事件，绑定滑块值 #

更新click函数，判断点击的是否为叶子节点（无子节点），如果是则将滑块值设置为该节点的score，并记录选中节点：

function click(d) {
  // 保留原有树形展开/折叠逻辑
  if (d.children) {
    d._children = d.children;
    d.children = null;
  } else {
    d.children = d._children;
    d._children = null;
  }
  update(d);

  // 处理叶子节点的滑块绑定
  if (!d.children && !d._children) { // 判定为叶子节点
    selectedLeafNode = d;
    const nodeScore = parseInt(d.data.score) || 0;
    document.getElementById('scoreRange').value = nodeScore;
    document.getElementById('currentScore').textContent = nodeScore;
  } else {
    // 点击非叶子节点时清空选中状态
    selectedLeafNode = null;
    document.getElementById('currentScore').textContent = "--";
  }
}

4. 添加滑块事件监听，同步更新数据 #

监听滑块的input事件，当滑块值变化时，同步更新选中节点的score字段，同时更新原始的flatData以保证数据持久化：

// 初始化滑块事件监听
document.getElementById('scoreRange').addEventListener('input', function(e) {
  if (!selectedLeafNode) return; // 无选中节点时不执行

  const newScore = e.target.value;
  // 更新页面显示的当前Score
  document.getElementById('currentScore').textContent = newScore;

  // 1. 更新树形节点的data字段
  selectedLeafNode.data.score = newScore;

  // 2. 更新原始flatData，确保数据持久化
  const targetFlatItem = flatData.find(item => item.name === selectedLeafNode.data.name);
  if (targetFlatItem) {
    targetFlatItem.score = newScore;
  }
});

修改后的完整核心代码 #

整合以上修改后的核心代码如下（保留你原有树形图的其他逻辑）：

// 全局变量：跟踪选中的叶子节点
let selectedLeafNode = null;

// the flat data 
var flatData = [ 
  { "name": "Root", "parent": null, "category": "test", "score": null }, 
  { "name": "Child 1", "parent": "Root", "category": "test", "score": "2" }, 
  { "name": "Child 2", "parent": "Root", "category": "test", "score": "3" }, 
  { "name": "Child 3", "parent": "Root", "category": "test", "score": "4" }, 
]; 

// convert the flat data into a hierarchy 
var tree = d3.stratify() 
  .id(function(d) { return d.name; }) 
  .parentId(function(d) { return d.parent; }) 
var treeData = tree(flatData); 

// assign the name to each node 
treeData.each(function(d) { d.name = d.id; }); 

// ... 保留你原有树形图的尺寸、SVG初始化、treemap设置等代码 ...

// 修改后的click函数
function click(d) {
  if (d.children) {
    d._children = d.children;
    d.children = null;
  } else {
    d.children = d._children;
    d._children = null;
  }
  update(d);

  // 叶子节点处理逻辑
  if (!d.children && !d._children) {
    selectedLeafNode = d;
    const nodeScore = parseInt(d.data.score) || 0;
    document.getElementById('scoreRange').value = nodeScore;
    document.getElementById('currentScore').textContent = nodeScore;
  } else {
    selectedLeafNode = null;
    document.getElementById('currentScore').textContent = "--";
  }
}

// 滑块事件监听
document.getElementById('scoreRange').addEventListener('input', function(e) {
  if (!selectedLeafNode) return;

  const newScore = e.target.value;
  document.getElementById('currentScore').textContent = newScore;
  selectedLeafNode.data.score = newScore;

  // 更新原始flatData
  const targetFlatItem = flatData.find(item => item.name === selectedLeafNode.data.name);
  if (targetFlatItem) {
    targetFlatItem.score = newScore;
  }
});

// ... 保留你原有update函数、collapse函数等代码 ...

关键说明 #

• 数据同步：我们同时更新了树形节点的data.score和原始flatData，这样无论是当前树形图的节点数据，还是后续重新生成树形结构时，都能获取到最新的score值。
• 叶子节点判定：通过!d.children && !d._children判断是否为叶子节点，避免非叶子节点触发滑块逻辑。
• 类型处理：将score字符串转为数字，确保滑块值的正确绑定（滑块的value默认是字符串类型）。

内容的提问来源于stack exchange，提问作者spids