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)

d3.js堆积图

1 个答案: