D3.js - Come evidenziare le colonne più grande e più piccola (minima e massima) in un grafico a barre?

Sono un designer che sta appena iniziando a scherzare con alcuni tutorial su d3 e ovviamente sono rimasto bloccato a un certo punto. Mi chiedevo quale sia il modo migliore per evidenziare le colonne più grandi e più piccole in un grafico a barre. Mi piacerebbe che differissero a colori, come "rosso" per il più piccolo "verde" per il più grande. Chiunque può darmi una mano.D3.js - Come evidenziare le colonne più grande e più piccola (minima e massima) in un grafico a barre?

Questo è quello che ho ottenuto finora:

<body> 

<script src="http://d3js.org/d3.v3.min.js"></script> 
<script> 

var t = 1297110663, // start time (seconds since epoch) 
     v = 70, // start value (subscribers) 
     data = d3.range(30).map(next); // starting dataset 

    function next() { 
    return { 
     time: ++t, 
     value: v = ~~Math.max(10, Math.min(90, v + 10 * (Math.random() - .5))) 
    }; 
} 

setInterval(function() { 
    data.shift(); 
    data.push(next()); 
    redraw(); 
}, 1500); 

var w = 11, 
     h = 120; 

var x = d3.scale.linear() 
     .domain([0, 1]) 
     .range([0, w]); 

var y = d3.scale.linear() 
    .domain([0, 100]) 
    .range([0, h]); 

var chart = d3.select("body").append("svg") 
    .attr("width", w * (data.length +3)) 
    .attr("height", h); 

chart.selectAll("rect") 
    .data(data) 
    .enter().append("rect") 
    .attr("x", function(d, i) { return x(i) ; }) 
    .attr("y", function(d) { return h - y(d.value) - .5; }) 
    .attr("width", w) 
    .attr("height", function(d) { return y(d.value); }) 
    .style("fill", "#ccc") 
    .style("stroke", "white") 

chart.select("rect") 
    .style("fill", "red"); 

chart.append("line") 
    .attr("x1", 0) 
    .attr("x2", w * (data.length)) 
    .attr("y1", h - .5) 
    .attr("y2", h - .5) 
    .style("stroke", "black"); 

</script>

Molte grazie in anticipo

fonte

2013-08-04 Helder Araujo

È possibile utilizzare:

d3.max(data, function(d) { return d.value; });

con la funzione corrispondente d3.min per ottenere la vostra misura (c'è è anche d3.extent che restituisce [min, max]).

Allora si potrebbe dire:

chart.select("rect") 
    .filter(function(d) { return d.value === max; }) 
    .classed("max", true);

che aggiungerà la classe max a qualsiasi bar con il valore massimo. Fai lo stesso per min e stai bene.

Inoltre si dovrebbe essere salvando le selezioni come:

var bars = chart.selectAll("rect") 
    .data(data); 

//use later, like 
bars.enter()... 
bars.filter()...

fonte

2013-08-04 21:59:25 enjalot

Grazie @enjalot. Sono stato in grado di capire come farlo a causa del tuo commento. La cosa olny che ho cambiato era in realtà usando sellectAll ("rect") invece di select ("rect"). Con select ha funzionato solo quando il massimo e il minimo erano nella prima posizione. 'var max = d3.max (dati, funzione (d) {return d.value}) chart.selectAll (" rect "). filter (funzione (d) {return d.value === max}) . classificato ("max", vero) .attr ("fill", "green") ' –

D3.js - Come evidenziare le colonne più grande e più piccola (minima e massima) in un grafico a barre?

risposta

Problemi correlati