箭头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];
		var x = d3.scaleLinear()	
		.domain([0, d3.max(data)]) 
		.range([0, 420]);
		d3.select(".chart")
		.selectAll("div")
		.data(data)
		.enter().append("div")
		.attr("class","roundedCorners")
		.style("width", function(d) {
		   return x(d) + "px";
		 })
		.text(function(d) { 
		   return d; 
		});

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