d3jsを使用してカラーグラデーションバーを作成する方法

Question

d3jsを使用してグラデーションバーを実装しようとしています.2色を指定すると、最初のカラー値から始まり他のカラー値で終わるグラデーションカラーを表示する必要があります。

だから、次のようになります。

をこれはビンの色が各点に周波数を示し、私は六角形のビンを使用して実装してい散布チャートの凡例です。データを動的に構築するので、これを別の動的に構築されたSVGに追加する必要があります。

Answer 1

あなたのsvg defsにグラデーションを作成し、それを任意のsvgシェイプに適用することができます。

<svg width="800" height="600" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
 
     <defs> 
 
      <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> 
 
      <stop offset="0%" stop-color="red"/> 
 
      <stop offset="100%" stop-color="yellow"/> 
 
      </linearGradient> 
 
     </defs> 
 

 
     <rect x="10" y="120" width="15" height="100" fill="url(#Gradient2)"/> 
 
     
 
    </svg>

フィドル：https://jsfiddle.net/gejuxmdx/1/

編集：あなたは、プレーンSVGとしてこれをハードコーディングしたり、他のSVGと同じようにD3でそれを作成することができます。

EDIT2：D3

var svgSelect = d3.select('body').append('svg').attr('width',800).attr('height', 600); 
 

 
var defs = svgSelect.append('defs'); 
 

 
var lg = defs.append('linearGradient') 
 
.attr('id', 'Gradient2') 
 
.attr('x1', 0) 
 
.attr('x2', 0) 
 
.attr('y1', 0) 
 
.attr('y2', 1); 
 

 
lg.append('stop') 
 
.attr('offset', '0%') 
 
.attr('stop-color', 'red'); 
 

 
lg.append('stop') 
 
.attr('offset', '100%') 
 
.attr('stop-color', 'yellow'); 
 

 

 
svgSelect.append('rect') 
 
.attr('x', 10) 
 
.attr('y', 120) 
 
.attr('width', 20) 
 
.attr('height', 120) 
 
.style("fill", "url(#Gradient2)"); 
 

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Answer 2

と同じことを行うためにここにいくつかの作業d3のコードがあります。

colorsアレイを調整すると、コードがデータ駆動になります！

var colors = [ 'rgb(255,0,0)', 'rgb(255,255,0)' ]; 
 

 
var svg = d3.select('body') 
 
    .append('svg') 
 
    .attr('width', 100) 
 
    .attr('height', 200); 
 

 
var grad = svg.append('defs') 
 
    .append('linearGradient') 
 
    .attr('id', 'grad') 
 
    .attr('x1', '0%') 
 
    .attr('x2', '0%') 
 
    .attr('y1', '0%') 
 
    .attr('y2', '100%'); 
 

 
grad.selectAll('stop') 
 
    .data(colors) 
 
    .enter() 
 
    .append('stop') 
 
    .style('stop-color', function(d){ return d; }) 
 
    .attr('offset', function(d,i){ 
 
    return 100 * (i/(colors.length - 1)) + '%'; 
 
    }) 
 

 
svg.append('rect') 
 
    .attr('x', 10) 
 
    .attr('y', 10) 
 
    .attr('width', 50) 
 
    .attr('height', 150) 
 
    .style('fill', 'url(#grad)'); 
 

 

 
      
 
     

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>