箭頭SVG梯度d3.js

Question

有沒有辦法使用d3.js創建漸變定義，這將導致以這樣的方式：

對不起，我以前的ASCII， 這就是我想要實現：

代替簡單的線性梯度的：

我沒有設法找到一種方法來做到這一點沒有拆分rects和創建相反的漸變。

謝謝！

Answer 1

使用d3.js，您正在使用SVG元素進行繪製。 SVG支持linear和radial漸變。此箭頭樣式漸變可以從兩個不同的線性漸變構建而成。

上述鏈接描述了漸變的可能屬性，但從d3.js使用它並不是那麼簡單。所以這裏是一個example for the radial gradient，很容易翻譯成你的版本。

繪製一個矩形，梯度：

var rectangle = svgContainer.append("rect") 
    .attr("x", 10) 
    .attr("y", 10) 
    .attr("width", 50) 
    .attr("height", 100) 
    .style("fill", "url(#gradient1)"); 

梯度必須象在上述例子中所定義：

var gradient1 = svgContainer.append("svg:defs") 
    .append("svg:radialGradient") 
    .attr("id", "gradient1") 
    .attr("cx", "50%") 
    ... 

Answer 2

這可以被實現。只是發佈帶有漸變和圓角的條形圖示例。這將幫助您獲得任何漸變效果。

var data = [40, 50, 30, 40, 90, 54, 20, 40, 50, 30, 40, 90, 54, 20]; 
 
\t \t var x = d3.scaleLinear() \t 
 
\t \t .domain([0, d3.max(data)]) 
 
\t \t .range([0, 420]); 
 
\t \t d3.select(".chart") 
 
\t \t .selectAll("div") 
 
\t \t .data(data) 
 
\t \t .enter().append("div") 
 
\t \t .attr("class","roundedCorners") 
 
\t \t .style("width", function(d) { 
 
\t \t return x(d) + "px"; 
 
\t \t }) 
 
\t \t .text(function(d) { 
 
\t \t return d; 
 
\t \t });

.roundedCorners{ 
 
    border-radius: 0px 40px 40px 0px; 
 
} 
 
.chart div { 
 
    background: rgb(254,204,177); /* Old browsers */ 
 
    background: -moz-linear-gradient(top, rgba(254,204,177,1) 0%, rgba(241,116,50,1) 50%, rgba(234,85,7,1) 51%, rgba(251,149,94,1) 100%); /* FF3.6-15 */ 
 
    background: -webkit-linear-gradient(top, rgba(254,204,177,1) 0%,rgba(241,116,50,1) 50%,rgba(234,85,7,1) 51%,rgba(251,149,94,1) 100%); /* Chrome10-25,Safari5.1-6 */ 
 
    background: linear-gradient(to bottom, rgba(254,204,177,1) 0%,rgba(241,116,50,1) 50%,rgba(234,85,7,1) 51%,rgba(251,149,94,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#feccb1', endColorstr='#fb955e',GradientType=0); /* IE6-9 */ 
 
    text-align: right; 
 
    padding: 5px; 
 
    margin: 2px; 
 
    color: white; 
 
}

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.min.js"></script> 
 

 
<div class="chart"></div>