带有 d3.js 的箭头 SVG 渐变答案

【问题标题】：Arrowed SVG gradient with d3.js带有 d3.js 的箭头 SVG 渐变
【发布时间】：2013-04-21 13:41:41
【问题描述】：

有没有办法使用 d3.js 创建渐变定义，结果如下：

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

而不是简单的线性渐变：

我没有设法在不分割矩形和创建相反渐变的情况下做到这一点。

谢谢！

【问题讨论】：

你有一个更具体的例子来说明你正在寻找什么吗？ ascii 艺术有点难以破译..
抱歉，ASCII 有歧义，希望现在更清楚了。
看the standard 看起来你不能直接做这样的事情。也许如果你将渐变和图案结合起来。
模式似乎是一种有趣的方式。谢谢！

标签： svg d3.js gradient

【解决方案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%")
    ...

【讨论】：

【解决方案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>

【讨论】：