3

私はかなり長い間探してきましたが、それを理解することができませんでした。

単一行の 2 つの補間「基本」と「ステップ後」の間の遷移が必要です。

var time_scale, kpi_scale;
var line;

var data = [
{"kpi": 100, "time": 1317448800000},
{"kpi": 200, "time": 1320127200000},
{"kpi": 250, "time": 1322719200000},
{"kpi": 180, "time": 1325397600000},
{"kpi": 230, "time": 1328076000000},
{"kpi": 360, "time": 1330581600000},
{"kpi": 140, "time": 1333260000000},
{"kpi": 120, "time": 1335852000000},
{"kpi": 240, "time": 1338530400000},
{"kpi": 190, "time": 1341122400000},
{"kpi": 185, "time": 1343800800000},
{"kpi": 130, "time": 1346479200000},
{"kpi": 340, "time": 1349071200000},
{"kpi": 320, "time": 1351749600000},
{"kpi": 250, "time": 1354341600000}
];

// set up the viewport, the scales, and axis generators      
var container_dimensions = {width: 900, height: 400},
    margins = {top: 10, right: 20, bottom: 30, left: 60},
    chart_dimensions = {
        width: container_dimensions.width - margins.left - margins.right,
        height: container_dimensions.height - margins.top - margins.bottom
    };

var time_extent = d3.extent(
    data,
    function(d){return d.time;}
);

time_scale = d3.time.scale()
    .domain(time_extent)
    .range([0, chart_dimensions.width]);

var kpi_extent = d3.extent(
    data,
    function(d){return d.kpi;}
);

kpi_scale = d3.scale.linear()
    .domain(kpi_extent)
    .range([chart_dimensions.height, 0]);

var container = d3.select('body')
    .append('svg')
        .attr("width", container_dimensions.width)
        .attr("height", container_dimensions.height)
    .append("g")
        .attr("transform", "translate(" + margins.left + "," + margins.top + ")")
        .attr("id","chart");

draw_timeseries (data);
transitionToStepped (data);

function draw_timeseries (data) {
    line = d3.svg.line()
        .x(function(d){return time_scale(d.time);})
        .y(function(d){return kpi_scale(d.kpi);})
        .interpolate("basis");

    d3.select('#chart').append('path')
        .attr('d', line(data))
        .attr('id', 'line')
        .attr('class', 'line');               
}

function transitionToStepped (data) {

    line.interpolate("step-after");

    d3.select("#chart").selectAll(".line")
        .transition()
        .duration(2000)
        .attr("d", line(data))
        .delay(2000);           
}

コードを含む小さな jsfiddle を保存しました。

jsFiddle 補間遷移

ベースラインとステップアフターラインの間で「モーフィング」したかったのです。しかし、d3 は、ベース ラインをステップ アフター ラインに「曲げる」のではなく、左からステップ アフター ラインをスライドしています。

ご協力いただきありがとうございます。クリストフ

4

1 に答える 1

2

これを行う方法が必要であり、確かに以下の提供よりも優れた方法があります（他の回答を見るのを楽しみにしています）が、私はまだここで回答を見ていません。ただし、遷移中に線が x 軸に平行になります。ひどいことではありませんが、私はあなたが求めているものを正確には信じていません.

オリジナルから変更された完全なコードとデモのフィドルは次のとおりです:
http://jsfiddle.net/n5P6z/2/

アプローチの要点は次のとおりです。

function xLineReduce() {
    line.x(function (d) {
        return time_scale(d.time);
    }).y(function (d) {
        return chart_dimensions.height;
    });
}

function resetInterpolator() {
    line.interpolate("cubic-in-out");
}

function stepItUp() {
    line.x(function (d, i) {
        return time_scale(d.time);
    })
        .y(function (d, i) {
        return kpi_scale(d.kpi);
    })
        .interpolate("step-after");
}

function transitionToStepped(myData) {
    path.data(myData)
        .call(xLineReduce)
        .transition()
        .delay(1000)
        .duration(500)
        .attr('d', line(myData));

    path.data(myData)
        .call(resetInterpolator)
        .transition()
        .delay(1500)
        .duration(0)
        .attr('d', line(myData));

    path.data(myData)
        .call(stepItUp)
        .transition()
        .delay(1500)
        .duration(500)
        .attr('d', line(myData));
}
于 2013-02-02T01:42:52.613 に答える