Question

这是在后台填充compass的当前代码：

compass watch

Example fiddle

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

我们可能会这样做（在html中）：fiddle

我怎么能在d3中这样做？

Answer 1

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

硬停止的含义是在边界位置为两种颜色定义两个停靠点。

<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的更多信息。

Answer 2

您需要附加两个rect才能让一个rect具有两种颜色体验。如下所示

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg></svg>

<强>更新
您需要找到svg

的宽度

var svgWidth = d3.select("svg").node().getBoundingClientRect().width; //svg width
var rect1Width = svgWidth * 40 / 100;  // 40% width of svg for rect1

以下是完整示例

var svgWidth = d3.select("svg").node().getBoundingClientRect().width;
var rect1Width = svgWidth * 40 / 100;
var rect = d3.select("svg")
   .append("rect")
   .attr("width", rect1Width)
   .attr("height", 100)
   .style("fill", "skyblue");

var rect1 = d3.select("svg")
   .append("rect")
   .attr("x", rect1Width)
   .attr("width", svgWidth - rect1Width)
   .attr("height", 100)
   .style("fill", "red");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width="200" height="100"></svg>

Answer 3

这是我最终使用的：（这是rmoestl答案的衍生物）

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<svg width="520" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
      <linearGradient id="Gradient1">
        <stop class="stop1" offset="0%"/>
        <stop class="stop2" offset="60%"/>
        <stop class="stop3" offset="100%"/>
      </linearGradient>
      
      <style type="text/css"><![CDATA[
        #rect1 { fill: url(#Gradient1); }
        .stop1 { stop-color: skyblue; }
        .stop2 { stop-color: white; stop-opacity: 1; }
        .stop3 { stop-color: blue; }
      ]]></style>
  </defs>
 
  <rect id="rect1" x="10" y="10" width="500" height="200"/>
  
  
</svg>

填写＆＃39; rect＆＃39;背景与d3中的2种颜色

3 个答案: