使用時間過去d3中的顏色轉換

Question

我一直很難繞過一些D3概念（我對javascript相對較新沒有幫助）。 我想要做的是有一個狀態指示器，開始綠色，慢慢變黃，然后慢慢變紅。 如果發生某些事件（按下按鈕，收到消息，等等），我希望指示器返回綠色，重新開始轉換。

這是一個簡單的例子（在jQuery中），顯示了基本的視覺效果（沒有重置能力） http://jsfiddle.net/N4APE/

在D3中，我的想法是將背景顏色映射到傳遞的毫秒數。 我嘗試創建這樣的比例：

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

但現在我有點迷失了。 我一直在玩轉換，補間和插值器的組合，但我似乎沒有到達任何地方。 這里有一些可悲的嘗試讓它運作http://jsfiddle.net/Ebuwa/

我的問題：

• 我不知道如何將過渡的經過毫米與我的比例相關聯，然后設置背景顏色
• 我的轉換似乎在我創建它時運行，而不是在我調用它時運行，並且它在錯誤的元素上運行。
• 一旦我克服了其他問題，我不肯定如何重置過渡以保持綠色。

另外一個注意事項，我可能很高興使用svg圈子或類似的東西，但我有運氣svg fill屬性，因為我有一個html背景屬性。

謝謝

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/

我還包括一個彩色的svg圈。 我猜你試圖用.style("color", "red")來改變它的顏色; 你需要使用.attr("fill", "red")來表示非CSS屬性。

Answer 2

我有同樣的問題，但也想改變文字顏色，以提供更多的對比度。 我還會使用經過的秒數更新消息（查看慢查詢需要多長時間）

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/

Answer 3

我想我可能一直在過度思考。 我想到我可以使用我的D3刻度和setInterval 。 像這樣的東西：

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/