javascript - D3.js Stream Graph json数据格式

Question

我正在尝试生成类似于此 beautiful example 的 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 格式是什么？这还是我的问题吗？

谢谢

Answer 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;
                        })
                })