如何用D3.js v4更优雅地修改JSON数据对象的属性？

当然有更具可读性的D3专属方法替代手动for循环，以下是两种实用方案：

方案一：用d3.forEach修改原数据 #

D3提供了d3.forEach工具方法，专门用于遍历数组，语法简洁且符合D3的使用习惯，可直接修改原数组中的节点width值：

var json_data = null;

d3.json("test_class_node.json", function (error, injsondata) {
  json_data = injsondata;
  // D3专属数组遍历方法，修改每个节点的width
  d3.forEach(json_data.nodes, function(node) {
    node.width += 10;
  });
  
  // 修正数据绑定：直接使用nodes数组而非d3.keys(json_data)
  var boxes = d3.selectAll('.box')
    .data(json_data.nodes)
    .enter()
    .append('div')
    .style('width', function(d) { return d.width + 'px'; }) // div的width需带单位，用style设置更合理
    .attr('class','box');
});

方案二：用d3.map生成新数据（不修改原数据） #

如果希望保留原始数据，可使用d3.map生成包含修改后width的新节点数组，原数据不受影响：

d3.json("test_class_node.json", function (error, injsondata) {
  // 生成修改后的新节点数组，原数据保持不变
  var modifiedNodes = d3.map(injsondata.nodes, function(node) {
    // 浅拷贝原节点对象并更新width
    return Object.assign({}, node, { width: node.width + 10 });
  });
  
  var boxes = d3.selectAll('.box')
    .data(modifiedNodes)
    .enter()
    .append('div')
    .style('width', function(d) { return d.width + 'px'; })
    .attr('class','box');
});

原代码注意事项 #

1. d3.keys(json_data)会返回["nodes"]字符串数组，这不是你需要的节点数据，绑定数据时应直接使用json_data.nodes
2. div元素的width属于CSS样式属性，使用style方法设置并带上px单位，比用attr设置更符合DOM规范

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