d3: Farbe einer Linie basierend auf einem anderen Datensatz

Ich möchte ein Rechteck um den Wert eines Datensatzes färben.d3: Farbe einer Linie basierend auf einem anderen Datensatz

Hier ist ein Beispiel, in dem ich eine Sinuskurve plotte und die Linie mit dem y-Wert einfärbe (von rot nach blau, wenn sich der y-Wert von 1 zu -1 ändert).

Was ich möchte, ist eine Leiste, die von diesem y-Wert gefärbt ist. Hier

ist eine Geige: https://jsfiddle.net/sanandak/m2jryr22/11/

(Entschuldigung für meinen früheren Post, wo die Geige fehlt!)

var svg = d3.select('body').append('svg') 
svg.attr('width', 300).attr('height', 300) 

data = d3.range(0, 2 * Math.PI, 0.1) 
    .map(function(t) { 
    return { 
     x: t, 
     y: Math.sin(t) 
    }; 
    }); 

var xScale = d3.scaleLinear() 
    .domain([0, 2 * Math.PI]) 
    .range([10, 290]) 

var yScale = d3.scaleLinear() 
    .domain([-1, 1]) 
    .range([150, 10]) 

var line = d3.line() 
    .x(function(d, i) { 
    return xScale(d.x); 
    }) 
    .y(function(d, i) { 
    return yScale(d.y); 
    }); 

svg.append("linearGradient") 
    .attr("id", "line-gradient") 
    .attr("gradientUnits", "userSpaceOnUse") 
    .attr("x1", 0).attr("y1", yScale(-1)) 
    .attr("x2", 0).attr("y2", yScale(1)) 
    .selectAll("stop") 
    .data([{ 
    "offset": "0%", 
    color: "blue" 
    }, { 
    "offset": "100%", 
    color: "red" 
    }]) 
    .enter() 
    .append("stop") 
    .attr("offset", function(d) { 
    return d.offset; 
    }) 
    .attr("stop-color", function(d) { 
    return d.color; 
    }) 

svg.append('g') 
    .datum(data) 
    .append('path') 
    .attr('d', line) 
    .attr('class', 'line') 
    .attr('stroke', 'url(#line-gradient)') 

svg.append('g') 
    .datum(data) 
    .append('rect') 
    .attr('x', 10) 
    .attr('y', 160) 
    .attr('width', 280) 
    .attr('height', 20) 
    .attr('fill', 'url(#line-gradient)')

Quelle

2017-03-10 SAK

Ich bin nicht sicher, was Sie nach. Ihr Farbverlauf deckt einen Bereich von 140 Pixeln ab. Ihre Leiste deckt einen Bereich von 20 ab. In der Leiste sehen Sie keinen Farbverlauf. – Mark

Ich habe die Geige aktualisiert, um zu zeigen, was ich versuche zu tun. Ich habe eine Reihe von "Rect" verwendet, die alle unterschiedlich gefärbt sind. Ich denke, es sollte einen einfacheren Weg geben ...? https://jsfiddle.net/sanandak/m2jryr22/ – SAK

ich jetzt verstehen. Ich würde einen komplexen Gradienten für Ihre y-Werte für die x-Domäne definieren:

var c = d3.scaleLinear() 
    .domain([-1,1]) 
    .range(['blue', 'red']) 

svg.append("linearGradient") 
    .attr("id", "line-gradient2") 
    .attr("gradientUnits", "userSpaceOnUse") 
    .attr("x1", 10).attr("y1", 0) 
    .attr("x2", 280).attr("y2", 0) 
    .selectAll("stop") 
    .data(data) 
    .enter() 
    .append('stop') 
    .attr('stop-color', function(d){ 
    return c(d.y); 
    }) 
    .attr('offset',function(d){ 
    return (d.x/xScale.domain()[1] * 100) + '%'; 
    });

Hier ist es in Aktion ist:

var svg = d3.select('body').append('svg') 
 
svg.attr('width', 300).attr('height', 300) 
 

 
data = d3.range(0, 2 * Math.PI, 0.1) 
 
    .map(function(t) { 
 
    return { 
 
     x: t, 
 
     y: Math.sin(t) 
 
    }; 
 
    }); 
 

 
var xScale = d3.scaleLinear() 
 
    .domain([0, 2 * Math.PI]) 
 
    .range([10, 290]) 
 

 
var yScale = d3.scaleLinear() 
 
    .domain([-1, 1]) 
 
    .range([150, 10]) 
 
    
 
var line = d3.line() 
 
    .x(function(d, i) { 
 
    return xScale(d.x); 
 
    }) 
 
    .y(function(d, i) { 
 
    return yScale(d.y); 
 
    }); 
 

 
svg.append("linearGradient") 
 
    .attr("id", "line-gradient") 
 
    .attr("gradientUnits", "userSpaceOnUse") 
 
    .attr("x1", 0).attr("y1", yScale(-1)) 
 
    .attr("x2", 0).attr("y2", yScale(1)) 
 
    .selectAll("stop") 
 
    .data([{ 
 
    "offset": "0%", 
 
    color: "blue" 
 
    }, { 
 
    "offset": "100%", 
 
    color: "red" 
 
    }]) 
 
    .enter() 
 
    .append("stop") 
 
    .attr("offset", function(d) { 
 
    return d.offset; 
 
    }) 
 
    .attr("stop-color", function(d) { 
 
    return d.color; 
 
    }) 
 
    
 
var c = d3.scaleLinear() 
 
\t .domain([-1,1]) 
 
\t .range(['blue', 'red']) 
 
    
 
svg.append("linearGradient") 
 
    .attr("id", "line-gradient2") 
 
    .attr("gradientUnits", "userSpaceOnUse") 
 
    .attr("x1", 10).attr("y1", 0) 
 
    .attr("x2", 280).attr("y2", 0) 
 
    .selectAll("stop") 
 
    .data(data) 
 
    .enter() 
 
    .append('stop') 
 
    .attr('stop-color', function(d){ 
 
    \t return c(d.y); 
 
    }) 
 
    .attr('offset',function(d){ 
 
    \t return (d.x/xScale.domain()[1] * 100) + '%'; 
 
    }); 
 

 
svg.append('g') 
 
    .datum(data) 
 
    .append('path') 
 
    .attr('d', line) 
 
    .attr('class', 'line') 
 
    .attr('stroke', 'url(#line-gradient)') 
 

 
svg.append('g') 
 
    .datum(data) 
 
    .append('rect') 
 
    .attr('x', 10) 
 
    .attr('y', 160) 
 
    .attr('width', 280) 
 
    .attr('height', 20) 
 
    .attr('fill', 'url(#line-gradient2)') 
 
    
 
var rWidth = 280/(data.length -1); 
 
svg.append('g') 
 
\t  .selectAll('rect') 
 
\t  .data(data) 
 
\t  .enter() 
 
\t  .append('rect') 
 
\t  .attr('x', function(d) {return xScale(d.x);}) 
 
\t  .attr('y', 200) 
 
\t  .attr('width', rWidth) 
 
\t  .attr('height', 20) 
 
\t  .attr('stroke', 'none') 
 
\t  .attr('fill', function(d) {return c(d.y);})

.line { 
 
    fill: none; 
 
    stroke-width: 2; 
 
}

<script src="//d3js.org/d3.v4.min.js"></script>

Quelle

2017-03-11 18:05:12 Mark

d3: Farbe einer Linie basierend auf einem anderen Datensatz

Antwort

Verwandte Themen