javascript - 在 d3 中用 2 种颜色填充 'rect' 背景

Question

这是当前后台填充skyblue的代码:

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

Example fiddle

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

我们可能会这样做(在 html 中):fiddle

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

Answer 1

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

hard stops 的意思是在边界位置为两种颜色定义两个停止点。

<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>

这里是关于 gradients in SVG 的更多信息.