是因为d3 v5版本中的颜色比例尺(color scale)发生了变化。在d3 v5之前的版本中,使用的是d3.scale.category10()函数来生成颜色比例尺,该函数会为每个不同的数据值分配一个固定的颜色。但在d3 v5中,这个函数被移除了。
在d3 v5中,可以使用d3.scaleOrdinal()函数来创建一个颜色比例尺。这个函数可以根据传入的数据值生成一组离散的颜色。使用方法如下:
var color = d3.scaleOrdinal()
.range(["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"]);
// 使用颜色比例尺
var node = svg.selectAll(".node")
.data(nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", 5)
.style("fill", function(d) { return color(d.group); });
var link = svg.selectAll(".link")
.data(links)
.enter().append("line")
.attr("class", "link")
.style("stroke", function(d) { return color(d.source.group); });
在上面的代码中,我们使用d3.scaleOrdinal()函数创建了一个颜色比例尺,并通过.range()方法指定了一组颜色。然后在创建节点和链接时,通过调用颜色比例尺的函数来获取对应的颜色。
这样就可以解决移动到d3 v5后颜色子代节点和链接断开的问题了。
推荐的腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云