填充「矩形」的背景與2個色，在d 3

這是當前代碼其的背景填充skyblue：填充「矩形」的背景與2個色，在d 3

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

Example fiddle

欲填充矩形的一部分（平均的值是拆分）與不同的顏色。

我們可以做這樣的事情（在HTML）：fiddle

我怎麼能做到這一點，在d？

來源

2016-06-09 Ani Menon

您需要附加兩個rect纔能有兩個顏色體驗的rect。像下面

var rect = d3.select("svg") 
 
    .append("rect") 
 
    .attr("width", 100) 
 
    .attr("height", 100) 
 
    .style("fill", "skyblue"); 
 
\t 
 
\t var rect1 = d3.select("svg") 
 
    .append("rect") 
 
\t .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>

來源

2016-06-09 09:47:59 ozil

這是唯一的辦法？還有一種簡單的方法可以實現'40％''width' => rect1，其餘部分=> rect2？ –

計算像？我可以用40％嗎？還是我必須指定一個數字？ –

是的，正在尋找類似的東西... –

你可以嘗試動態構建梯度「硬」，在SVG的defs部分停止並使用此梯度上rect這樣fill="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>

下面是關於gradients in SVG的更多信息。

來源

2016-06-09 09:59:45 rmoestl

這是非常有趣的。你能給我一個垂直線的小提琴把'rect'分成兩種不同的顏色。我不知道該怎麼做（40％藍色，60％紅色）。 –

這是我最後使用：（這是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>

來源

2016-06-09 10:30:26

填充「矩形」的背景與2個色，在d 3

回答

相關問題