svg - 带有 d3.js 的箭头 SVG 渐变

Question

有没有办法使用 d3.js 创建一个渐变定义，这将导致：

抱歉之前的 ASCII，这就是我想要实现的目标：

而不是简单的线性渐变：

在不分割矩形和创建相反渐变的情况下，我无法找到一种方法来做到这一点。

谢谢！

Answer 1

使用 d3.js，您可以使用 SVG 元素进行绘图。SVG 支持线性和径向渐变。这种箭头样式的渐变可以从两个不同的线性渐变构建。

上面的链接描述了渐变的可能属性，但从 d3.js 中使用它并不是那么简单。所以这里有一个径向渐变的例子，它很容易转化为你的版本。

绘制一个渐变矩形：

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>