Wie man einen Farbverlaufsbalken mit d3js macht

Question

Ich versuche, einen Farbverlaufsbalken mit d3js zu implementieren. Wenn ich also 2 Farben gebe, muss ich die Farbverlaufsfarbe vom ersten Farbwert bis zum anderen Farbwert anzeigen.

So würde es ähnlich aussehen wie diese:

Dies ist die Legende für ein Streudiagramm Diagramm Ich bin Umsetzung hexagonal Körben, wo Bins Farbe an jedem Punkt die Frequenz anzeigt. Da ich die Daten dynamisch erstelle, muss ich sie an ein anderes dynamisch erstelltes SVG anhängen.

Answer 1

Sie können einen Farbverlauf in Ihren SVG-Definitionen erstellen und dann auf eine beliebige SVG-Form anwenden.

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

Fiddle: https://jsfiddle.net/gejuxmdx/1/

Edit: Sie können mit D3 codieren dies als Klar SVG oder erstellen Sie es wie jedes andere SVG.

Edit2: die gleiche Sache zu tun mit 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

Hier einige Arbeits d3 Code.

Die Einstellung colors Array macht den Code datengetrieben!

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>