Question

在参考D3 Sankey（https://bost.ocks.org/mike/sankey/）时，我想询问使用JSON文件中的某些分类变量为节点着色的方法。

链接到实际代码中使用的JSON文件： https://bost.ocks.org/mike/sankey/energy.json

因此，我的问题是，如果我提供一些与“名称”类别有关的信息：

{"name":"Solar PV", "category":"A"},
{"name":"Solar Thermal","category":"A"},
{"name":"Solar","category":"B"},
{"name":"Tidal","category":"C"},
{"name":"UK land based bioenergy","category":"A"},
{"name":"Wave","category":"A"},
{"name":"Wind","category":"B"}

然后应该对源代码进行哪些更改，以根据类别为节点着色。 P.S：不是D3 / JS的专家，请原谅我有限的技能，如果这个问题看起来太天真了。

由于

Answer 1

在链接的示例中，您将看到此代码块：

node.append("rect")
  .attr("height", function(d) { return d.dy; })
  .attr("width", sankey.nodeWidth())
  .style("fill", function(d) { return d.color = color(d.name.replace(/ .*/, "")); })
  .style("stroke", function(d) { return d3.rgb(d.color).darker(2); })
  .append("title")
  .text(function(d) { return d.name + "\n" + format(d.value); });

将.style("fill"行替换为：

.style("fill", function(d) { return d.color = color(d.category); })

Answer 2

在Bostock的代码中，这是为矩形着色的线：

.style("fill", function(d) { 
    return d.color = color(d.name.replace(/ .*/, "")); 
})

所以，只需将其更改为：

.style("fill", function(d) { 
    return d.color = color(d.category); 
})

基于JSON的sankey.js节点着色

2 个答案: