D3 v5中如何根据节点度数为节点着色（深浅对应度数高低）

你的代码无法正常运行核心问题有两个：

• 误用了序数比例尺(scaleOrdinal)：节点度数是连续数值，序数比例尺仅适用于离散分类值，一旦度数超出你定义的[1,5]范围，就会返回无效颜色；
• 颜色序列未匹配度数深浅逻辑：你选的是一组不同色调的颜色，无法直观体现“度数越高颜色越深”的对应关系。

以下是修正后的完整实现：

1. 先计算所有节点的度数 #

如果你的节点数据里还没有degree字段，需要先遍历边数据统计每个节点的连接数：

// 假设边数据存在links数组中
nodes.forEach(node => {
  node.degree = links.filter(link => link.source === node.id || link.target === node.id).length;
});

2. 定义连续颜色比例尺 #

使用d3.scaleSequential或d3.scaleLinear实现连续的深浅映射，前者生成的渐变视觉差异更明显：

// 获取度数的最小、最大值，作为比例尺的定义域
const degreeExtent = d3.extent(nodes, d => d.degree);

// 用内置蓝色系插值器，生成从浅到深的渐变
const colorScale = d3.scaleSequential()
  .domain(degreeExtent)
  .interpolator(d3.interpolateBlues);

// 若要自定义颜色范围，可改用scaleLinear：
// const colorScale = d3.scaleLinear()
//   .domain(degreeExtent)
//   .range(["#e6f7ff", "#0050b3"]); // 浅蓝到深蓝的自定义区间

3. 绑定颜色到节点 #

将颜色比例尺应用到节点的填充样式：

var node = svg.append("g")
  .attr("class", "nodes")
  .selectAll("circle")
  .data(nodes)
  .enter().append("circle")
  .attr("r", 5)
  .style("fill", d => colorScale(d.degree));

可选优化：添加颜色图例 #

如果需要让用户清晰理解颜色对应的度数范围，可以补充图例：

const legend = svg.append("g")
  .attr("transform", "translate(20, 20)");

// 创建颜色条容器
const legendWidth = 150;
const legendHeight = 10;

legend.append("rect")
  .attr("width", legendWidth)
  .attr("height", legendHeight)
  .style("fill", "url(#gradient)");

// 定义渐变规则
const gradient = svg.append("defs")
  .append("linearGradient")
  .attr("id", "gradient")
  .attr("x1", "0%")
  .attr("x2", "100%");

gradient.append("stop")
  .attr("offset", "0%")
  .attr("stop-color", colorScale(degreeExtent[0]));

gradient.append("stop")
  .attr("offset", "100%")
  .attr("stop-color", colorScale(degreeExtent[1]));

// 添加度数标签
legend.append("text")
  .attr("x", 0)
  .attr("y", legendHeight + 15)
  .text(degreeExtent[0]);

legend.append("text")
  .attr("x", legendWidth)
  .attr("y", legendHeight + 15)
  .attr("text-anchor", "end")
  .text(degreeExtent[1]);

内容的提问来源于stack exchange，提问作者razwan Al - Bari