Javascript 如何在d3.js中绘制指南针形状并对每个三角形进行不同的着色？

我在d3.js中使用一个线生成器绘制了这个形状，其目的是使它看起来像一个指南针

左图：我所拥有的 右图：我想要的只是中间的红色/黑色，而不是整个指南针

我以前做的是：

function drawArrowCompass() { //draw arrow

    var dataArrow = [
        [35, 50],
        [50, 0],
        [65, 50],
        [50, 100],
        [35, 50]
    ];
    var lineGenerator = d3.line();
    var pathString = lineGenerator(dataArrow);

    var compassArrow = d3.select("#noun_compass");

    //draw arrow(s)
    compassArrow.append("path")
        .attr('d', pathString);

}

使用相应的HTML：

<div id="compass">
        <svg width="100" height="100" id="noun_compass"></svg>
</div>

---

然而，我这样做的方式，我看不到一种方法来添加两种不同的颜色的路径。有人知道我如何在d3.js中绘制这样的形状吗？提前谢谢

一个简单的解决方案是使用一个50%的停止颜色，如下所示：

var gradient = svg.append("defs")
  .append("linearGradient")
  .attr("id", "gradient");
gradient.append("stop")
  .attr("offset", "50%")
  .attr("stop-color", "red");
gradient.append("stop")
  .attr("offset", "50%")
  .attr("stop-color", "black");

如果对形成路径的点进行硬编码，则必须旋转它以保持渐变方向，如下所示：

var gradient = svg.append("defs")
  .append("linearGradient")
  .attr("id", "gradient");
gradient.append("stop")
  .attr("offset", "50%")
  .attr("stop-color", "red");
gradient.append("stop")
  .attr("offset", "50%")
  .attr("stop-color", "black");

var svg=d3.selectsvg； var gradient=svg.appenddefs .appendlinearGradient .属性1，0% .attry2，100% .X1，50% .X2，50% .属性，梯度； 梯度。追加停止 .抵消，50% .停止颜色，红色； 梯度。追加停止 .抵消，50% .彩色，黑色； 罗盘； 功能罗盘{ 变量数据箭头=[ [35, 50], [50, 0], [65, 50], [50, 100], [35, 50] ]; var lineGenerator=d3.0线； var pathString=lineGeneratordataArrow； var compassArrow=d3。选择名词\u compass； compassArrow.appendpath .attr'd'，路径字符串 .attrfill，url渐变 .attrtransform，旋转80,50,50； };

---

一个简单的解决方案是使用一个50%的停止颜色，如下所示：

var gradient = svg.append("defs")
  .append("linearGradient")
  .attr("id", "gradient");
gradient.append("stop")
  .attr("offset", "50%")
  .attr("stop-color", "red");
gradient.append("stop")
  .attr("offset", "50%")
  .attr("stop-color", "black");

如果对形成路径的点进行硬编码，则必须旋转它以保持渐变方向，如下所示：

var gradient = svg.append("defs")
  .append("linearGradient")
  .attr("id", "gradient");
gradient.append("stop")
  .attr("offset", "50%")
  .attr("stop-color", "red");
gradient.append("stop")
  .attr("offset", "50%")
  .attr("stop-color", "black");

var svg=d3.selectsvg； var gradient=svg.appenddefs .appendlinearGradient .属性1，0% .attry2，100% .X1，50% .X2，50% .属性，梯度； 梯度。追加停止 .抵消，50% .停止颜色，红色； 梯度。追加停止 .抵消，50% .彩色，黑色； 罗盘； 功能罗盘{ 变量数据箭头=[ [35, 50], [50, 0], [65, 50], [50, 100], [35, 50] ]; var lineGenerator=d3.0线； var pathString=lineGeneratordataArrow； var compassArrow=d3。选择名词\u compass； compassArrow.appendpath .attr'd'，路径字符串 .attrfill，url渐变 .attrtransform，旋转80,50,50； };

---

我的方法是，为单个箭头创建一个路径数据d属性，其中路径的原点位于箭头的底部，然后使用相同的数据创建两条路径，但变换不同。这是健壮的，并且允许轻松地更改箭头的位置、方向和计数

身体{ 保证金：0； 位置：固定； 排名：0； 右：0； 底部：0； 左：0； } //您可以随意更改或删除在此编辑器中看到的任何代码！ var svg=d3.selectbody.appendsvg .宽度，200 .身高，200 .attr'viewBox'，'-50-50 100' var path_d=M 0,0 L 0，-10 L 50,0 L 0,10 Z； 函数updateAnglevalue{ var角度=parseIntvalue； 风险值数据=[{ 角度:角度,， 颜色：“黑色” }, { 角度：180+角度%360， 颜色：“红色” }]; 路径=svg。选择所有“路径” .数据； 路径。输入 .append'path' .attr'd'，路径 .合并路径 .style'fill'，d=>d.color .attr'transform'，d=>`rotate${d.angle}`； 路径。退出。移除； } updateAngle0；

---

我的方法是，为单个箭头创建一个路径数据d属性，其中路径的原点位于箭头的底部，然后使用相同的数据创建两条路径，但变换不同。这是健壮的，并且允许轻松地更改箭头的位置、方向和计数

身体{ 保证金：0； 位置：固定； 排名：0； 右：0； 底部：0； 左：0； } //您可以随意更改或删除在此编辑器中看到的任何代码！ var svg=d3.selectbody.appendsvg .宽度，200 .身高，200 .attr'viewBox'，'-50-50 100' var path_d=M 0,0 L 0，-10 L 50,0 L 0,10 Z； 函数updateAnglevalue{ var角度=parseIntvalue； 风险值数据=[{ 角度:角度,， 颜色：“黑色” }, { 角度：180+角度%360， 颜色：“红色” }]; 路径=svg。选择所有“路径” .数据； 路径。输入 .append'path' .attr'd'，路径 .合并路径 .style'fill'，d=>d.color .attr'transform'，d=>`rotate${d.angle}`； 路径。退出。移除； } updateAngle0；

---

这是一个伟大的解决方案！它不适合我的特定用途，但它非常复杂。谢谢这是一个很好的解决方案！它不适合我的特定用途，但它非常复杂。谢谢