d3.js堆积图

Question

我已经实现了一个JSON回调函数，该函数根据此模板检索数据以创建以下图形：http://mbostock.github.com/d3/ex/stack.html。我认为问题在于，我正在切断浏览器的某些必要信息，以便在调用函数transitionGroup（）时进行调用。这段代码产生的错误是，它基本上找不到每个栏的宽度，也不能找到它们应该沿轴放置的x值。任何帮助将非常感激！

感谢

var numCases, 


arrayOfUserData, 
    data, 
    numLayers, 
    width = 960 
    margin = 20 
    height = 500 - .5 - margin; 
    /* x, 
    y0, 
    y1, 
    y2; */ 

     d3.json("dataURL.com", function(json){ 


    arrayOfUserData = json.test_funfData; 
    console.log("User Funf Data: ", arrayOfUserData); 
    console.log("Phone_calls", arrayOfUserData[0].Phone_Calls); 

    var numLayers = arrayOfUserData.length - 1, // number of layers 
    numCases = arrayOfUserData.length, // number of users 
    data = create_funf_layers(numLayers,numCases,arrayOfUserData),//d3.layout.stack()  (stream_layers(numLayers, numCases, .1)), 
    color = d3.interpolateRgb("#aad", "#556"); 

    console.log(create_funf_layers(numLayers, numCases, arrayOfUserData)); 

    console.log(arrayOfUserData); 
    console.log("working data: ",data); 

    var margin = 20, 
    width = 960, 
    height = 500 - .5 - margin, 
    mx = numCases, 
    my = d3.max(data, function(d) { 
     return d3.max(d, function(d) { 
     return d.y0 + d.y; 
     }); 
    }), 
    mz = d3.max(data, function(d) { 
     return d3.max(d, function(d) { 
     return d.y; 
     }); 
    }); 

    x = function(d) { return d.x * width/mx; }, 
    y0 = function(d) { return height - d.y0 * height/my; }, 
    y1 = function(d) { return height - (d.y + d.y0) * height/my; }, 
    y2 = function(d) { return d.y * height/mz; }; // or `my` to not rescale 


    var vis = d3.select("#chart") 
    .append("svg") 
    .attr("width", width) 
    .attr("height", height + margin); 

    var layers = vis.selectAll("g.layer") 
    .data(data) 
    .enter().append("g") 
    .style("fill", function(d, i) { return color(i/(numLayers - 1)); }) 
    .attr("class", "layer"); 

    var bars = layers.selectAll("g.bar") 
    .data(function(d) { return d; }) 
    .enter().append("g") 
    .attr("class", "bar") 
    .attr("transform", function(d) { return "translate(" + x(d) + ",0)"; }); 

    bars.append("rect") 
    .attr("width", x({x: .9})) 
    .attr("x", 0) 
    .attr("y", height) 
    .attr("height", 0) 
    .transition() 
    .delay(function(d, i) { return i * 10; }) 
    .attr("y", y1) 
    .attr("height", function(d) { return y0(d) - y1(d); }); 

    var labels = vis.selectAll("text.label") 
    .data(data[0]) 
    .enter().append("text") 
    .attr("class", "label") 
    .attr("x", x) 
    .attr("y", height + 6) 
    .attr("dx", x({x: .45})) 
    .attr("dy", ".71em") 
    .attr("text-anchor", "middle") 
    .text(function(d, i) { return arrayOfUserData[i].Username }); 

    vis.append("line") 
    .attr("x1", 0) 
    .attr("x2", width - x({x: .1})) 
    .attr("y1", height) 
    .attr("y2", height); 

    }); 

    function transitionGroup() { 
    var group = d3.selectAll("#chart"); 

     group.select("#group") 
     .attr("class", "first active"); 

    group.select("#stack") 
     .attr("class", "last"); 

    group.selectAll("g.layer rect") 
    .transition() 
     .duration(500) 
     .delay(function(d, i) { return (i % numCases) * 10; }) 
     .attr("x", function(d, i) { return x({x: .9 * ~~(i/numCases)/numLayers}); }) 
     .attr("width", x({x: .9/numLayers})) 
     .each("end", transitionEnd); 

     console.log("group",group); 

     function transitionEnd() { 
     d3.select(this) 
     .transition() 
     .duration(500) 
     .attr("y", function(d) { return height - y2(d); }) 
     .attr("height", y2); 
     } 
    } 

    function transitionStack() { 
    var stack = d3.select("#chart"); 

    stack.select("#group") 
     .attr("class", "first"); 

    stack.select("#stack") 
     .attr("class", "last active"); 

    stack.selectAll("g.layer rect") 
    .transition() 
     .duration(500) 
     .delay(function(d, i) { return (i % numCases) * 10; }) 
     .attr("y", y1) 
     .attr("height", function(d) { return y0(d) - y1(d); }) //return y0(d) - y1(d) 
     .each("end", transitionEnd); 

     function transitionEnd() { 
    d3.select(this) 
     .transition() 
     .duration(500) 
     .attr("x", 0) 
     .attr("width", x({x: .9})); 
     } 
    } 

Answer 1

你确定你与“create_funf_layers（......）”产生的数据是正确的格式？

它必须看起来像这样：

var barArray = [ 
         [ 
          { "x": 0, "y": 9}, 
          { "x": 1, "y": 29}, 
          { "x": 2, "y": 29}, 
          { "x": 3, "y": 29}, 
          { "x": 4, "y": 29} 
         ], 
         [ 
          { "x": 0, "y": 19}, 
          { "x": 1, "y": 49}, 
          { "x": 2, "y": 29}, 
          { "x": 3, "y": 29}, 
          { "x": 4, "y": 29} 
         ], 
         [ 
          { "x": 0, "y": 19}, 
          { "x": 1, "y": 49}, 
          { "x": 2, "y": 29}, 
          { "x": 3, "y": 29}, 
          { "x": 4, "y": 29} 
         ], 
         [ 
          { "x": 0, "y": 19}, 
          { "x": 1, "y": 49}, 
          { "x": 2, "y": 29}, 
          { "x": 3, "y": 29}, 
          { "x": 4, "y": 29} 
         ], 
         [ 
          { "x": 0, "y": 19}, 
          { "x": 1, "y": 49}, 
          { "x": 2, "y": 29}, 
          { "x": 3, "y": 29}, 
          { "x": 4, "y": 29} 
         ] 
        ]; 

而数据则可以这样分配：

 data = d3.layout.stack()(barArray)