Sankey-diagram PowerBI custom visual with color nodes and ordering

Question

The sankey diagram of PowerBI has many possibilities but as you can read on the github site there are some important limitations. The first is that it is not possible to color the nodes. In addition, it is also not possible to change the order of the nodes (both source and destination).

Attached is an example PowerBI file in which a sankey is displayed. In this file is indicated which colors the nodes should have and what the order of the nodes should be.

The best solution is of course to use PowerBI to indicate the colors as in this example with the links. But probably it is easier to indicate the colors of the nodes (names) in the code itself with a hard value this would also be a nice alternative. Same holds for the ordering of the nodes

I looked at the colorscale function of d3 to link it to fillcolor. But I got an error message that the string values cannot be linked to colorscale.

The Github page with the code can be found here: https://github.com/microsoft/powerbi-visuals-sankey

I think this line of code should change:

nodeFillColor = this.colorHelper.isHighContrast ? this.colorHelper.getThemeColor() : this.colorPalette.getColor(index.toString()).value;
console.log(nodeFillColor);
nodeStrokeColor = this.colorHelper.getHighContrastColor("foreground", nodeFillColor);

The colors are now based on a theme color. Hopefully it is possible to link the nodes (name) to a color instead of a theme.

Hopefully you can help me and other users of the Sankey.

Answer 1

看起来如果您需要注入一些第三方颜色值（无论是十六进制还是其他格式），您可以在突出显示的代码中使用 ColorHelper 实例来“作弊”。以下示例可以在 powerbi 文档中找到：https://github.com/microsoft/powerbi-visuals-utils-colorutils/blob/master/docs/api/colorUtils.md#calculatehighlightcolor

import ColorUtility = powerbi.extensibility.utils.color;

let yellow = "#FFFF00",
    yellowRGB = ColorUtility.parseColorString(yellow);

ColorUtility.calculateHighlightColor(yellowRGB, 0.8, 0.2);

// returns: '#CCCC00'

最终我认为这可以归结为以下一种辅助方法：

ColorUtility.parseColorString('<colorhex>')

我不知道将其插入到您正在做的事情中的最佳方法，但您可以尝试生成随机的十六进制颜色并将其插入以查看另一侧的结果。

// thanks Paul Irish: https://www.paulirish.com/2009/random-hex-color-code-snippets/
let randcolor = '#'+Math.floor(Math.random()*16777215).toString(16)
// Then to replace the example code you had in your question...
nodeFillColor = this.colorHelper.parseColorString(randcolor)
nodeStrokeColor = this.colorHelper.getHighContrastColor("foreground", nodeFillColor);