D3 桑基定制答案

【问题标题】：D3 Sankey customizationD3 桑基定制
【发布时间】：2021-12-05 15:23:09
【问题描述】：

大多数库都提供有限的桑基图自定义（如节点颜色、宽度、填充）。

默认桑基图（d3）：

但是如果我需要更改节点高度并将节点垂直居中怎么办？我该怎么做？

我的要求：

谁能帮帮我？

【问题讨论】：

【解决方案1】：

有点老套，但你可以覆盖 CSS 规则来设置你想要的元素样式。

例如，如果我在名为“sankey”的 div 中有一个 d3 生成的 Sankey 图表，我可以添加这些 CSS 规则以将 rect 元素更改为红色，并将形成链接的路径元素更改为蓝色。

从一些非常简短的测试来看，rect 元素似乎需要“！important” CSS 修饰符，因此关于它的评论似乎有点 hacky：

#sankey > svg > g > g > g > rect {
    fill: red !important;
}

#sankey > svg > g > g > path {
    stroke: blue;
    stroke-opacity: 0.7;
}

要使矩形更大，您可以将它们的笔触颜色设置为与填充相同，并将笔触宽度设置为较大，然后在 d3 API 中使用“nodePadding”参数。

我附上了一张截图，说明我在玩这些游戏时所做的工作：

【讨论】：

【解决方案2】：

不用看你的代码 - 这是一个猜谜游戏。因此，我假设您已经在互联网上使用了几乎共享相同代码的 sankey D3.js 示例。在某些时候，您可能会看到如下内容：

var sankey = d3.sankey()
    .nodeWidth(12)
    .nodePadding(12)
    .size([width, height]);

请尝试使用 nodeWidth（放大值）来获得你想要的东西。

【讨论】：