在 d3 中用 2 种颜色填充“矩形”背景

Question

skyblue这是填充背景的当前代码：

var rect=d3.select("svg")
  .append("rect")
  .attr("width", 1250)
  .attr("height", 100)
  .style("fill","skyblue");

小提琴示例

我想用不同的颜色填充矩形的一部分（分割值的平均值）。

我们可以做这样的事情（在html中）：fiddle

我怎样才能在 d3 中做到这一点？

Answer 1

您可以尝试在 SVG部分中动态构建带有“硬”停止的渐变，并像这样defs使用此渐变rectfill="url(#IdOfYourGradient)"

我所说的硬停止点是指在边界位置为两种颜色定义两个停止点。

<defs>
      <linearGradient id="Gradient1">
        <stop class="stop1" offset="0%"/>
        <stop class="stop2" offset="50%"/>
        <stop class="stop3" offset="50%"/>
        <stop class="stop4" offset="100%"/>
      </linearGradient>
      <style type="text/css"><![CDATA[
        .stop1, stop2 { stop-color: red; }
        .stop3, stop4 { stop-color: blue; }
      ]]></style>
 </defs>

以下是有关SVG 中渐变的更多信息。