9

私はいくつかの 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/を機能させるための哀れな試みを次に示します。

私の問題:

  • トランジションの経過ミリ秒をスケールに関連付けて、背景色を設定する方法がわかりません
  • トランジションを呼び出したときではなく、作成したときに実行されているように見え、間違った要素で動作します。
  • 他の問題を克服した後、トランジションをリセットしてグリーンを維持する方法については確信が持てません。

もう1つ注意してください。代わりにsvgサークルなどを使用しても問題ありませんが、html背景属性があるのと同じように、svg塗りつぶし属性を操作するのと同じくらい運が悪かったです。

ありがとうございました

4

3 に答える 3

17

実際にスケールを操作する必要はありません。

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 プロパティに使用する必要があります。

于 2013-07-03T03:08:47.363 に答える
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/

于 2014-01-08T14:45:50.857 に答える
0

私は物事を考えすぎていたのかもしれないと思います。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/

于 2013-07-03T17:02:08.530 に答える