相关疑难解决方法(0)

d3.js Sankey图:矩形填充颜色

所以我正在玩d3.js Sankey图.

在此输入图像描述

此示例中(如上图所示),使用定义颜色

var color = d3.scale.category20();
Run Code Online (Sandbox Code Playgroud)

对于每个节点,都有一个矩形,并通过更改样式填充该矩形:

.style("fill", function(d) {
    return d.color = color(d.name.replace(/ .*/, ""));
})
Run Code Online (Sandbox Code Playgroud)

我在寻找使用自定义颜色的建议.如果我只想使用6种颜色,但是根据.json文件中的值选择节点矩形颜色.

例如,假设我想在美国国家橄榄球联盟中展示一个有关球队的蛇形图表.颜色各自代表球队所在的分区.因此,如果他们移动到不同的分区,颜色会发生变化.并且每个季节都会创建节点.沿着那条线的东西.

那么有可能运行

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); });
Run Code Online (Sandbox Code Playgroud)

使用基于json文件中的值的颜色?我在想一个if语句,但有更简单的方法吗?我可以在json中包含十六进制颜色代码吗?

d3.js sankey-diagram

6
推荐指数
2
解决办法
3万
查看次数

标签 统计

d3.js ×1

sankey-diagram ×1