1

いくつかのアクティビティ トラッカー データを使用して、この美しい例に似た D3 ストリーム グラフを生成しようとしています。

この例を参照しました - http://jsfiddle.net/NTJPB/1/light

私の JSFiddle - http://jsfiddle.net/Nyquist212/00war1o6/は、json 形式に何か問題があると言っています (例でモデル化しようとしているにもかかわらず)。

私のコードのコアは次のようになります -

    data.forEach(function(d){
        parseDate = d3.time.format("%m/%d/%Y").parse;
        d.date = parseDate(d.date); 
        d.value = Math.round(+d.value);        
    });

    var maxval = d3.max(data, function(d){ return d.value; });

    // Nest the json by key
    var nest = d3.nest()
        .key(function(d) { return d.key; })
        .entries(data);

   var margin = {top: 50, right: 50, bottom: 50, left: 50 },
        width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;

    var color = d3.scale.linear()
        .range(["#0A3430", "#1E5846", "#3E7E56", "#6BA55F", "#A4CA64", "#E8ED69"]);

    var x = d3.scale.linear()
        .range([0, width])
        .domain([0, data[0].length]);

    var y = d3.scale.linear()
        .range([height, 0])
        .domain([0, maxval]);

    var svg = d3.select("body").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var stack = d3.layout.stack()
        .offset("wiggle");

    var layers = stack([data]);

    var area = d3.svg.area()
        .interpolate('cardinal')
        .x(function (d, i) { return x(i); })
        .y0(function (d) { return y(d.y0);})
        .y1(function (d) { return y(d.y0 + d.y);});

    svg.selectAll(".layer")
        .data(layers)
        .enter().append("path")
        .attr("class", "layer")
        .attr("d", function (d) {return area(d);})
        .style("fill", function (d, i) {
        return color(i);
    });
var layers = stack([nest]);

var area = d3.svg.area()
    .interpolate('cardinal')
    .x(function (d, i) { return x(i); })
    .y0(function (d) { return y(d.y0);})
    .y1(function (d) { return y(d.y0 + d.y);});

svg.selectAll(".layer")
    .data(layers)
    .enter().append("path")
    .attr("class", "layer")
    .attr("d", function (d) {return area(d);})
    .style("fill", function (d, i) {
    return color(i);
});

データをマッサージするために必要な優先/望ましいjson形式は何ですか? これも私の問題ですか？

ありがとう

4

1 に答える 1