Chuyển đổi màu trong d3 sử dụng thời gian trôi qua

Question

Tôi đã gặp khó khăn khi gói đầu xung quanh một số khái niệm D3 (nó không giúp tôi tương đối mới với javascript). Những gì tôi đang cố gắng làm là có một chỉ báo trạng thái bắt đầu màu xanh lá cây, từ từ chuyển sang màu vàng, và sau đó từ từ chuyển sang màu đỏ. Nếu một số sự kiện xảy ra (nút bấm, tin nhắn nhận được, bất cứ điều gì), tôi muốn các chỉ số để trở về màu xanh lá cây, khởi động lại quá trình chuyển đổi.

Dưới đây là một ví dụ đơn giản (trong jQuery) cho thấy hiệu ứng hình ảnh cơ bản (không có khả năng để thiết lập lại) http://jsfiddle.net/N4APE/

Trong D3, ý tưởng của tôi là để lập bản đồ màu nền cho số mili giây trôi qua. Tôi đã cố gắng tạo thang tỷ lệ như sau:

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

Nhưng bây giờ tôi đã mất một chút. Tôi đã chơi với sự kết hợp của quá trình chuyển đổi, tweens, và interpolators, nhưng tôi dường như không nhận được bất cứ nơi nào. Dưới đây là một số nỗ lực thảm hại để làm cho nó làm việc http://jsfiddle.net/Ebuwa/

vấn đề của tôi:

• Tôi không biết làm thế nào để kết hợp millis trôi qua của một chuyển đổi sang quy mô của tôi, và sau đó thiết lập màu nền
• My chuyển đổi dường như chạy khi tôi tạo nó, thay vì khi tôi gọi nó, và nó hoạt động trên yếu tố sai.
• Tôi không tích cực cách đặt lại quá trình chuyển đổi để giữ cho màu xanh lục khi tôi đã chinh phục được các sự cố khác của mình.

Một lưu ý khác, tôi có thể hạnh phúc khi sử dụng vòng tròn svg hoặc thứ gì đó tương tự, nhưng tôi đã may mắn khi thao tác thuộc tính điền svg vì tôi có thuộc tính nền html.

Cảm ơn bạn

Answer 1

Bạn không thực sự cần phải làm bất cứ công việc với quy mô, .transition() sẽ chăm sóc công việc khó khăn đằng sau hậu trường:

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")); 

Để thiết lập lại quá trình chuyển đổi, chỉ cần thêm một sự kiện onclick vào yếu tố:

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

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

Tôi cũng đã bao gồm một vòng tròn màu svg. Tôi đoán bạn đang cố gắng sử dụng .style("color", "red") để thay đổi màu của nó; bạn cần sử dụng .attr("fill", "red") cho các thuộc tính không phải CSS.

Answer 2

Tôi nghĩ rằng tôi có thể đã bị suy nghĩ quá mức. Nó xảy ra với tôi tôi chỉ có thể sử dụng quy mô D3 của tôi với setInterval. Một cái gì đó như thế này:

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)); 
} 

Full dụ làm việc ở đây: http://jsfiddle.net/WBAuT/1/

Answer 3

Tôi có cùng một câu hỏi nhưng muốn thay đổi màu sắc văn bản cũng như để cung cấp độ tương phản hơn vào lúc cuối.Mine cũng cập nhật thông điệp với giây trôi qua (để xem truy vấn chậm mất bao lâu)

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

làm việc Ví dụ đây:

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