javascript - 使用 d3 绘制堆积条形图

Question

我正在尝试调整此代码:

http://bl.ocks.org/anupsavvy/9513382

使用自定义数据绘制堆积条形图。我不需要任何过渡，只需要一个简单的情节。

我最终得到了这段代码:

data = jsonArr;

var margin = {
    top: 40,
    right: 40,
    bottom: 40,
    left: 40
  },
  width = 600 - margin.left - margin.right,
  height = 400 - margin.top - margin.bottom;

var color = d3.scale.ordinal()
  .range(colorrange);

var stack = d3.layout.stack();

stack(data);

var xScale = d3.time.scale()
  .domain([new Date(0, 0, 0, data[0][0].label, 0, 0, 0), new Date(0, 0, 0, data[0][data[0].length - 1].label, 0, 0, 0)])
  .rangeRound([0, width - margin.left - margin.right]);


var yScale = d3.scale.linear()
  .domain([0,
    d3.max(data, function(d) {
      return d3.max(d, function(d) {
        return d.y0 + d.value;
      });
    })
  ])
  .range([height - margin.bottom - margin.top, 0]);

var xAxis = d3.svg.axis()
  .scale(xScale)
  .ticks(d3.time.hour, 1)
  .tickFormat(d3.time.format("%H"));

var yAxis = d3.svg.axis()
  .scale(yScale)
  .orient("left")
  .ticks(10);

var svg = d3.select("#info")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

var groups = svg.selectAll("g")
  .data(data)
  .enter()
  .append("g")
  .attr("class", "rgroups")
  .attr("transform", "translate(" + margin.left + "," + (height - margin.bottom) + ")")
  .style("fill", function(d, i) {
    return colorrange[i];
  });

var rects = groups.selectAll("rect")
  .data(function(d) {
    return d;
  })
  .enter()
  .append("rect")
  .attr("width", 6)
  .attr("height", function(d) {
    return -yScale(d.value) + (height - margin.top - margin.bottom);
  })
  .attr("x", function(d) {
    return xScale(new Date(0, 0, 0, d.label, 0, 0, 0));;
  })
  .attr("y", function(d) {
    return -(-yScale(d.y0) - yScale(d.value) + (height - margin.top - margin.bottom) * 2);
  });

console.log(rects);

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(40," + (height - margin.bottom) + ")")
  .call(xAxis);


svg.append("g")
  .attr("class", "y axis")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
  .call(yAxis);

svg.append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", 0 - 5)
  .attr("x", 0 - (height / 2))
  .attr("dy", "1em")
  .text("Number of complaints");

svg.append("text")
  .attr("class", "xtext")
  .attr("x", width / 2 - margin.left)
  .attr("y", height - 5)
  .attr("text-anchor", "middle")
  .text("Hour of day");

更具体地说:

yScale(d.y0) 返回 NaN。

如果我评论这段代码，我可以看到轴:

过了一会儿，我设法看到了一些数据(其中有错误):

我想我不理解绘制数据本身的正确方法。 任何帮助，将不胜感激。

我的json label属性与y坐标相关，而value与坐标相关>x 坐标。

编辑:

看来问题是在我调用stack时开始的。第一个数组的 y0 值为 0，但第二个和第三个数组的 y0 = NaN。我不知道如何解决这个问题。

这是相对的jsfiddle:

https://jsfiddle.net/rhzkz9gb/13/

Answer 1

您需要提供数据的访问器函数(因为它没有使用“x”和“y”作为键控)。

var stack = d3.layout.stack().x(function(d,i){return i;}).y(function(d){return d.value;});

https://jsfiddle.net/ermineia/rhzkz9gb/14/