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