javascript - D3.js 在堆叠到分组条形图示例中通过修改后的 Lee Byron 测试算法生成器传递 CSV

Question

我正在使用 d3.js 的 stacked-to-grouped bar graph 。我修改了示例的随机数据生成器。现在它无法正确读取我的 csv 文件。

最终图表将具有:
x 轴由日期确定
y 轴由小时*、周或月确定

*我的小时命名约定是“dnh”。

代码如下。感谢您的帮助!:

var data = [];
var dataByDay = [];

d3.csv('data/friday.csv', function(myData) {
  // console.log(myData);
  return {
    date: myData.date,
    dnh: +myData.dnh
  };

}, function(myData) {
  data = myData;
  // console.log(myData[0]);
});

function doBarChart() {
  var n = 4, // number of layers
    m = 30, // number of samples per layer (m will be equal to my x values (time))
    stack = d3.layout.stack(),
    layers = stack(d3.range(n).map(function() {
      return bumpLayer(m, .1);
    })),
    yGroupMax = d3.max(layers, function(layer) {
      return d3.max(layer, function(d) {
        return d.y;
      });
    }), // algorithm for grouped passing through y data values
    yStackMax = d3.max(layers, function(layer) {
      return d3.max(layer, function(d) {
        return d.y0 + d.y;
      });
    }); // algorithm for stacked passing through y values

  var margin = {
      top: 40,
      right: 10,
      bottom: 20,
      left: 10
    }, // "canvas" setup
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

  var x = d3.scale.ordinal() // setup for the rangeBands / rangeBand (fitting values to the canvas width that we have)
    .domain(d3.range(m))
    .rangeRoundBands([0, width], .08); // check reference on rangeRound behavior

  var y = d3.scale.linear() // nb: do not need to change to time scale. unix has already been converted & t = 0 - 29
    .domain([0, yStackMax])
    .range([height, 0]); // question: what is the 0 value? does it resituate stacks on x = 0?

  var color = d3.scale.linear()
    .domain([0, n - 1])
    .range(["#aad", "#556"]);

  var xAxis = d3.svg.axis() // defines x-axis, situates it as the bottom (x) and not left (y)
    .scale(x) // passing x values through ordinal scale
    .tickSize(0)
    .tickPadding(6)
    .orient("bottom");

  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 layer = svg.selectAll(".layer") // !!!! layers = ?
    .data(layers) // layers passed through database
    .enter().append("g") // adding graphic
    .attr("class", "layer") // selectAll is being applied here
    .style("fill", function(d, i) {
      return color(i);
    }); // clarify: i = index of data

  var rect = layer.selectAll("rect") // rect = actual bars
    .data(function(d) {
      return d;
    })
    .enter().append("rect")
    .attr("x", function(d) {
      return x(d.x);
    })
    .attr("y", height)
    .attr("width", x.rangeBand())
    .attr("height", 0);

  // -------------------------------------------------------------------------------------- testing tooltip fx
  // var tooltip = d3.select('body').append('div')
  //   .style('position','absolute')
  //   .style('padding', '0 10px')
  //   .style('background', 'white')
  //   .style('opacity', 0)
  // ---------------------------------------------------------------------------------------------------------

  rect.transition()
    .delay(function(d, i) {
      return i * 10;
    })
    .attr("y", function(d) {
      return y(d.y0 + d.y);
    })
    .attr("height", function(d) {
      return y(d.y0) - y(d.y0 + d.y);
    });

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

  d3.selectAll("input").on("change", change);

  var timeout = setTimeout(function() {
    d3.select("input[value=\"grouped\"]").property("checked", true).each(change);
  }, 2000);

  function change() {
    clearTimeout(timeout);
    if (this.value === "grouped") transitionGrouped();
    else transitionStacked();
  }

  // ---------------------------------------------------------------------- transition fx : grouped + stacked
  function transitionGrouped() {
    y.domain([0, yGroupMax]);

    rect.transition()
      .duration(500)
      .delay(function(d, i) {
        return i * 10;
      })
      .attr("x", function(d, i, j) {
        return x(d.x) + x.rangeBand() / n * j;
      })
      .attr("width", x.rangeBand() / n)
      .transition()
      .attr("y", function(d) {
        return y(d.y);
      })
      .attr("height", function(d) {
        return height - y(d.y);
      });
  }

  function transitionStacked() {
      y.domain([0, yStackMax]);

      rect.transition()
        .duration(500)
        .delay(function(d, i) {
          return i * 10;
        })
        .attr("y", function(d) {
          return y(d.y0 + d.y);
        })
        .attr("height", function(d) {
          return y(d.y0) - y(d.y0 + d.y);
        })
        .transition()
        .attr("x", function(d) {
          return x(d.x);
        })
        .attr("width", x.rangeBand());
    }
    // ---------------------------------------------------------------------------------------------------------
    // ! testing : on mouseOver function for tooltip !
    // tooltip.on('mouseover'), function(d){
    //   tooltip.transition()
    //     .style('opacity', .9)
    //
    //   tooltip.html(d)
    //     .style('left', (d3.event.pageX) + 'px' )
    //     .style('top',  (d3.event.pageY) + 'px')
    // }
    // ---------------------------------------------------------------------------------------------------------


  function bumpLayer(n, o) {
    console.log("print o");
    var a = [],
      i;
    for (i = 0; i < n; ++i) a[i] = data[i].date; //o + o * Math.random();
    // for (i = 0; i < 5; ++i){
    //   for (j = 0; j < n; ++j)
    //     a[j] = .25;
    // }
    // bump(a);
    return a.map(function(d, i) {
      return {
        x: i,
        y: Math.max(0, d)
      };
    });
  }
}

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: auto;
  position: relative;
  width: 960px;
}
text {
  font: 10px sans-serif;
}
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
form {
  position: absolute;
  right: 10px;
  top: 10px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>hellotest</title>
  <link rel="stylesheet" href="css/style.css">
  <form>
    <label>
      <input type="radio" name="mode" value="grouped">Grouped</label>
    <label>
      <input type="radio" name="mode" value="stacked">Stacked</label>
  </form>
</head>

<body>
  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <script src="js/testindex.js"></script>
</body>

</html>

Answer 1

d3.csv 是异步的。我看到您将 data 设为全局并将其关联到 myData，但有时它下面的代码会在加载 CSV 之前运行。尝试在 d3.csv 函数外部使用 console.log(data) 来检查 data 是否已正确填充。如果没有，请将所有依赖于 myData 的函数放入 d3.csv 函数中。