svg - d3.js を使用した矢印付き SVG グラデーション

Question

d3.js を使用して、次のような結果になるグラデーション定義を作成する方法はありますか?

以前のASCIIで申し訳ありませんが、これは私が達成しようとしているものです:

単純な線形グラデーションの代わりに:

四角形を分割して反対のグラデーションを作成せずにこれを行う方法を見つけることができませんでした。

ありがとう！

Answer 1

これは達成できます。グラデーションと角の丸い棒グラフの例を投稿するだけです。これにより、グラデーション効果を得ることができます。

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>