D3.js - 如何突出顯示條形圖中最大和最小（最小和最大）列？

我是一個設計師，剛開始玩弄一些d3教程，當然我只是被困在某個時刻。我想知道哪個是突出顯示條形圖中最大和最小列的最佳方式。我希望他們在顏色上有所不同，比如「紅色」，最小的「綠色」等等。任何人都可以幫助我。D3.js - 如何突出顯示條形圖中最大和最小（最小和最大）列？

這是我走到這一步：提前

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

非常感謝

來源

2013-08-04 Helder Araujo

您可以使用：

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

與相應d3.min功能一起，讓您的程度（有也是d3.extent，它返回[min, max]）。

然後，你可以說：

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

這將max類添加到任何酒吧的最大值。爲min做同樣的事情，你很好。 @enjalot

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

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

來源

2013-08-04 21:59:25 enjalot

感謝：

你也應該保存您的選擇等。由於您的評論，我能夠弄清楚如何做到這一點。我改變的olny事實上是使用sellectAll（「rect」）而不是select（「rect」）。選擇它只有在最大和最小值處於第一位時才起作用。 var max = d3.max（data，function（d）{return d.value}） chart.selectAll（「rect」）。filter（function（d）{return d.value === max}）。（「max」，true） .attr（「fill」，「green」）' –

D3.js - 如何突出顯示條形圖中最大和最小（最小和最大）列？

回答

相關問題