在 d3.js 中分割特征/路径

Question

我有几个 SVG 路径，它们会根据某些参数改变填充颜色和不透明度。

当两个参数在同一个 SVG 特征上时，我想清楚地表明在这个特征中有这两个不同的“事物”（或对象）。

我一开始想混合两种不同的颜色（如果只有一个参数，那就只有一种颜色），但现在我发现它不是很直观。

也许将正方形（或圆形）除以一半（如果只有 2 个参数）或除以 3、4、5 会更具表现力...每个部分都有相应的颜色（用户还会有一个图例每个参数 => 对应的颜色）。

但我暂时不知道如何开始实施。

感谢任何想法、链接或建议...谢谢！

Answer 1

不要为每个单独的功能创建一个 <path>，而是为每个单独的功能创建一个组 (<g>)，它可以包含任意数量的 <path> 元素，或者您需要做的任何事情来帮助区分参数。请注意，绑定到 <g> 元素的任何数据都会自动可用/绑定到其子元素。