समय का उपयोग कर डी 3 में रंग संक्रमण

Question

मुझे कुछ डी 3 अवधारणाओं के आसपास अपने सिर को लपेटने में कठिनाई हो रही है (यह मदद नहीं करता है कि मैं जावास्क्रिप्ट के लिए अपेक्षाकृत नया हूं)। जो मैं करने की कोशिश कर रहा हूं वह एक स्टेटस इंडिकेटर है जो हरा शुरू होता है, धीरे-धीरे पीला मोड़ता है, और फिर धीरे-धीरे लाल हो जाता है। अगर कुछ घटना होती है (बटन प्रेस, संदेश प्राप्त होता है, जो भी हो), मैं चाहता हूं कि सूचक हरे रंग में लौट जाए, संक्रमण को पुनरारंभ करें।

यहाँ एक सरल उदाहरण (jQuery में) बुनियादी दृश्य प्रभाव (रीसेट करने की क्षमता के बिना) दिखा http://jsfiddle.net/N4APE/

डी 3 में है, मेरा विचार पारित कर दिया मिलीसेकेंड की संख्या के लिए पृष्ठभूमि रंग मैप करने के लिए किया गया था। मैं इस तरह के पैमाने बनाने की कोशिश की:

//10 sec is yellow, 30 sec is red 
d3.scale.linear().domain([0, 10000, 30000]).range(["#00ff00", "#ffff00", "#ff0000"]); 

लेकिन अब मैं थोड़ा खो रहा हूँ। मैं संक्रमण, tweens, और interpolators के संयोजन के साथ खेल रहा है, लेकिन मुझे लगता है कि कहीं भी नहीं मिल रहा है। यहाँ कुछ दयनीय प्रयास है हो यह http://jsfiddle.net/Ebuwa/

मेरे मुद्दों काम करने के लिए:

• मैं अपने पैमाने पर परिवर्तन की गुजरे मिली सेकंड के संबद्ध करने के लिए कैसे पता नहीं है, और उसके बाद पृष्ठभूमि रंग सेट
• मेरे संक्रमण जब मैं इसे बनाता हूं, तब इसे चलाने लगता है, जब मैं इसे कॉल करता हूं, और यह गलत तत्व पर चलता है।
• मैं सकारात्मक नहीं हूं कि मैंने अपनी अन्य समस्याओं पर विजय प्राप्त करने के बाद इसे हरा रखने के लिए संक्रमण को कैसे रीसेट करना है।

एक अन्य ध्यान दें, मैं बजाय एक svg चक्र या ऐसा ही कुछ का उपयोग कर खुश हो सकता है, लेकिन मैं बस के रूप में गरीब भाग्य एक svg भरने विशेषता जोड़ तोड़ के रूप में मैं एक एचटीएमएल पृष्ठभूमि विशेषता पड़ा है।

धन्यवाद

Answer 1

आप वास्तव में तराजू के साथ किसी भी काम करने के लिए की जरूरत नहीं है, .transition() पर्दे के पीछे कड़ी मेहनत का ख्याल रखेंगे:

function changeElementColor(d3Element){ 
    d3Element 
    .transition().duration(0) 
     .style("background", "green") 
    .transition().duration(1000) 
     .style("background", "yellow") 
    .transition().delay(1000).duration(5000) 
     .style("background", "red"); 
} 
changeElementColor(d3.select("#d3Color")); 

संक्रमण रीसेट करने के लिए, बस एक जोड़ने तत्व को onclick घटना:

d3.select("#d3Color") 
    .on("click", function(){ changeElementColor(d3.select(this)) }); 

http://jsfiddle.net/N4APE/2/

मैंने एक रंगीन एसवीजी सर्कल भी शामिल किया है। मुझे लगता है कि आप अपने रंग बदलने के लिए .style("color", "red") का उपयोग करने का प्रयास कर रहे थे; आपको गैर सीएसएस गुणों के लिए .attr("fill", "red") का उपयोग करने की आवश्यकता है।

Answer 2

मुझे लगता है कि मैं चीजों पर विचार कर रहा हूं। यह मेरे लिए हुआ था, मैं सिर्फ setInterval के साथ अपने डी 3 स्केल का उपयोग कर सकता हूं। कुछ इस तरह:

var step = 100; 

var scale = d3.scale.linear() 
       .domain([0, msToYellow, msToRed]) 
       .range([green, yellow, red]); 

setInterval(function(){ 
    elapsed += step;  
    update(elapsed);  
}, step); 

function update(e){ 
    d3.select("input") 
     .style("background", scale(e)); 
} 

पूर्ण काम कर यहाँ उदाहरण: http://jsfiddle.net/WBAuT/1/

Answer 3

मैं एक ही सवाल था, लेकिन अंत की ओर अधिक विपरीत प्रदान करने के लिए और साथ ही पाठ रंग बदलने के लिए करना चाहता था।(कितनी देर तक धीमी गति से प्रश्नों ले देखने के लिए) मेरा भी बीत चुके सेकंड के साथ संदेश का अद्यतन

var duration = 30 * 1000; 

// background color progression is smooth from lime to orange to red 
var colorScale = d3.scale.linear().clamp(true) 
    .domain([0, duration/2, duration]) 
    .range(['lime', 'orange', 'red']); 

// text color is mostly black but switches to yellow when there is good contrast 
var textScale = d3.scale.quantile() 
    .domain([0, 0.85 * duration, duration]) 
    .range(['black', 'yellow', 'yellow']); 

var start = new Date(); 
var counterId = setInterval(function() { 
    console.log("setInterval ID: " + counterId); 
    var now = new Date(); 
    var elapsed = Math.round((now - start)/1000); 
    var message = "Querying... " + (elapsed) + " s"; 
    elapsed = 1000 * elapsed; 
    d3.select('#progress') 
    .style("color", textScale(elapsed)) 
     .style("background", colorScale(elapsed)) 
     .html(message) 
    ; 
}, 1000); 

कार्य उदाहरण यहाँ:

http://jsfiddle.net/SKLUn/5/