D3.js 是否可以使线图上代表数据点的点具有两种颜色（例如，半红、半绿、垂直分割）？

我有一个相当复杂的折线图，上面画着六条不同颜色的线，线上有点标记着不同的数据点

在某些情况下，如果有许多线穿过一个小的水平空间，图表可能很难阅读。为了解决这个问题，我希望能够使点包含每条线的颜色，例如，如果绿线和红线交叉，它们的交点将是一个点，其左半部分为红色，右半部分为绿色

---

这可能吗？如果是，我该怎么做？谢谢。

一种方法是使用线性渐变，如中的

所述：

<svg height="100" width="100">
  <defs>
    <linearGradient id="red-green" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
      <stop offset="50%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
      <stop offset="50%" style="stop-color:rgb(0,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(0,255,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <circle r="50" cx="50" cy="50" fill="url(#red-green)" />
</svg>