D3.js - बार चार्ट में सबसे बड़े और छोटे (न्यूनतम और अधिकतम) कॉलम को कैसे हाइलाइट करें?

मैं एक डिजाइनर हूं जो कुछ डी 3 ट्यूटोरियल्स के साथ बस बेवकूफ़ बनाना शुरू कर रहा है और निश्चित रूप से मैं बस कुछ बिंदु पर अटक गया। मैं सोच रहा था कि बार ग्राफ में सबसे बड़े और छोटे कॉलम को हाइलाइट करने का सबसे अच्छा तरीका कौन सा है। मैं उन्हें सबसे बड़ा रंग "हरा" के लिए "लाल" जैसे रंग में अलग करना चाहता हूं। कोई भी मेरी मदद कर सकता है।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 के लिए ऐसा ही करें और आप अच्छे हैं।

इसके अलावा, आप की तरह अपने चुनावों की बचत की जानी चाहिए:

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

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

स्रोत

2013-08-04 21:59:25 enjalot

धन्यवाद @enjalot। मैं यह समझने में सक्षम था कि आपकी टिप्पणी के कारण इसे कैसे किया जाए। बदली हुई चीज़ जो वास्तव में चयन ("rect") के बजाय sellectAll ("rect") का उपयोग कर रही थी। चयन के साथ यह केवल तब काम करता था जब अधिकतम और न्यूनतम पहली स्थिति में थे। 'var max = d3.max (डेटा, फ़ंक्शन (डी) {वापसी d.value}) chart.selectAll (" rect ")। फ़िल्टर (फ़ंक्शन (डी) {वापसी d.value === अधिकतम}) । वर्गीकृत ("अधिकतम", सत्य) .attr ("भरें", "हरा") ' –

D3.js - बार चार्ट में सबसे बड़े और छोटे (न्यूनतम और अधिकतम) कॉलम को कैसे हाइलाइट करें?

उत्तर

संबंधित मुद्दे