Формат данных D3.js Stream Graph json

Я пытаюсь создать D3 Stream Graph, подобный этому прекрасному примеру, используя некоторые данные отслеживания активности.

Я сослался на этот пример — 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 мне нужен для массирования моих данных? Это вообще моя проблема?

Спасибо


person Colin    schedule 12.06.2015    source источник
comment
Я не уверен, что ваши данные действительно подходят для такого типа визуализации. Как видите, пример JSFiddle, на который вы ссылаетесь, имеет двумерный массив для источника данных. Ваш скрипт дает сбой на data[0].length, так как первый дочерний элемент в вашем массиве является объектом... который не имеет собственного свойства length. Возможно, вы захотите сделать шаг назад и посмотреть, чего вы пытаетесь достичь.   -  person Matt    schedule 13.06.2015
comment
Мэтт, возможно, вы правы... но в обоих примерах используются данные нескольких рядов. У меня есть три набора данных временных рядов. Каждый с отметкой даты и значением. Почему это не подходит для потокового графа? Я не против, но хочу понять ваши рассуждения.   -  person Colin    schedule 13.06.2015


Ответы (1)


Я провел рефакторинг, и мне удалось заставить его работать... среди прочего, я думаю, что загрязнял свое пространство имен глобальных переменных.

http://jsfiddle.net/Nyquist212/00war1o6/

margin = {top: 20, right: 20, bottom: 20, left: 30};
    width = 950 - margin.left - margin.right;
    height = 250 - margin.top - margin.bottom;

    colorrange = ["#B30000", "#E34A33", "#FC8D59", "#FDBB84", "#FDD49E", "#FEF0D9"];

    parseDate = d3.time.format("%m/%d/%Y").parse;

    x = d3.time.scale().range([margin.left, width]);

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

    z = d3.scale.ordinal().range(colorrange);

    xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom")
        .ticks(d3.time.years);

    yAxis = d3.svg.axis().scale(y);

    nest = d3.nest()
        .key(function(d) { return d.key; });

    data.forEach(function(d) {
        d.date = parseDate(d.date);
        d.value= +d.value;
        });

    stack = d3.layout.stack()
        .offset("silhouette")
        .values(function(d) { return d.values; })
        .x(function(d) { return d.date; })
        .y(function(d) { return d.value; });

    layers = stack(nest.entries(data));

    area = d3.svg.area()
        //.interpolate("cardinal")
        .interpolate("basis")
        .x(function(d) { return x(d.date); })
        .y0(function(d) { return y(d.y0); })
        .y1(function(d) { return y(d.y0 + d.y); });

    svg = d3.select("#streamgraph").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 + ")");

    layers = stack(nest.entries(data));

        x.domain(d3.extent(data, function(d) { return d.date; }));
        y.domain([0, d3.max(data, function(d) { return d.y0 + d.y; })]);

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

    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

    svg.append("g")
          .attr("class", "y axis")
          .attr("transform", "translate(" + width + ", 0)")
          .call(yAxis.orient("right"));

    svg.append("g")
          .attr("class", "y axis")
          .call(yAxis.orient("left"));


    svg.selectAll(".layer")
            .attr("opacity", 1)
            .on("mouseover", function(d, i) {
                svg.selectAll(".layer").transition()
                    .duration(250)
                    .attr("opacity", function(d, j) {
                        return j != i ? 0.6 : 1;
                        })
                })
person Colin    schedule 13.06.2015