Question

我已尝试借助此链接自定义现有的Stacked Bar图形代码 https://bl.ocks.org/mbostock/1134768

我在给定链接的帮助下完成了这个图，但我对y轴上的数据点有些困惑，如下图所示

这是我的Stacked bar Graph

的完整代码

var data = [
    {month: 'Jan',total:100 ,A: 35, B: 5, C: 10},
    {month: 'Feb',total:200 ,A: 30, B: 10, C: 20},
    {month: 'Mar',total:300 ,A: 0, B: 10, C: 20}
];

var xData = ["A", "B", "C"];

var margin = {top: 20, right: 50, bottom: 30, left: 50},
        width = 400 - margin.left - margin.right,
        height = 300 - margin.top - margin.bottom;

var x = d3.scale.ordinal()
        .rangeRoundBands([0, width], .35);

var y = d3.scale.linear()
        .rangeRound([height, 0]);

var color = d3.scale.category20();

var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom");

var yAxis = d3.svg.axis()
        .scale(y)
      .orient("left");

var svg = d3.select("#chart").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 + ")");

data.forEach(function(d) {
      xData.forEach(function(c) {
        d[c] = +d[c];}); })

var dataIntermediate = xData.map(function (c) {
    return data.map(function (d) {
        return {x: d.month, y: d[c]};});});

var dataStackLayout = d3.layout.stack()(dataIntermediate);

x.domain(dataStackLayout[0].map(function (d) {
    return d.x; }));

y.domain([0,d3.max(dataStackLayout[dataStackLayout.length - 1],
            function (d) { return d.y0 + d.y;}) ]).nice();

var layer = svg.selectAll(".stack")
        .data(dataStackLayout)
        .enter().append("g")
        .attr("class", "stack")
        .style("fill", function (d, i) {
            console.info(i, color(i));
            return color(i);});

layer.selectAll("rect")
        .data(function (d) {
            return d;})
        .enter().append("rect")
        .attr("x", function (d) {
            console.info("dx", d.x,x(d.x), x.rangeBand());
            return x(d.x);})
        .attr("y", function (d) {
            return y(d.y + d.y0);})
        .attr("height", function (d) {               
            return y(d.y0) - y(d.y + d.y0); })
        .attr("width", x.rangeBand() -1);

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

  svg.append("g")
      .attr("class", "axis axis--y")
      .call(yAxis)
       .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end");

当我从给定的URL获取帮助时，我已经更改了我的代码，它将数组数据作为输入而不是CSV文件。但我认为我在y轴上的数据点（标签）不是根据给定的数据（关键字：总数）。

任何帮助都应该受到赞赏。

Answer 1

这是关于如何在y轴上显示总计数的混淆的解决方案因为在我的数据数据中有关键的＆＃39;总计＆＃39;这是所有州的总数，例如＆＃39; A＆＃39;，＆＃39; B＆＃39; ＆安培; ＆＃39; C＆＃39;以数组数据显示

    var data = [
    {month: "4/1854",total:"100" ,A: "45", B:"45", C:"10"},
    {month: "5/1854",total:"200" ,A:"80", B:"70", C:"50"},
    {month: "6/1854",total:"300" ,A:"0", B:"100", C:"200"}
];

因为数组数据中有一个总键，我必须在y轴上显示为标签。这是我的完整代码

 var data = [
    {month: "4/1854",total:"100" ,A: "45", B:"45", C:"10"},
    {month: "5/1854",total:"200" ,A:"80", B:"70", C:"50"},
    {month: "6/1854",total:"300" ,A:"0", B:"100", C:"200"}
];

var xData = ["A", "B", "C"];

  var parseDate = d3.time.format("%m/%Y").parse;

var margin = {top: 20, right: 50, bottom: 30, left: 50},
        width = 500 - margin.left - margin.right,
        height = 350 - margin.top - margin.bottom;

var x = d3.scale.ordinal()
        .rangeRoundBands([0, width], .35);

var y = d3.scale.linear()
        .rangeRound([height, 0]);

var color = d3.scale.category20();
//console.info(color(0));

var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom")
        .tickFormat(d3.time.format("%b"));

var yAxis = d3.svg.axis()
        .scale(y)
      .orient("left");

var svg = d3.select("#pie").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 + ")");

data.forEach(function(d) {
      d.month = parseDate(d.month);
      xData.forEach(function(c) {
        d[c] = +d[c];
      });

    })

var dataIntermediate = xData.map(function (c) {
    return data.map(function (d) {
        return {x: d.month, y: d[c]};
    });
});

var dataStackLayout = d3.layout.stack()(dataIntermediate);

x.domain(dataStackLayout[0].map(function (d) {
    return d.x;
}));

y.domain([0,
   d3.max(data, function(d) { return d.total; })
    ])
  .nice();

var layer = svg.selectAll(".stack")
        .data(dataStackLayout)
        .enter().append("g")
        .attr("class", "stack")
        .style("fill", function (d, i) {
            console.info(i, color(i));
            return color(i);
        });

layer.selectAll("rect")
        .data(function (d) {
            return d;
        })
        .enter().append("rect")
        .attr("x", function (d) {
            console.info("dx", d.x,x(d.x), x.rangeBand());
            return x(d.x);
        })
        .attr("y", function (d) {
            return y(d.y + d.y0);
        })
        .attr("height", function (d) {
            // console.info(d.y0, d.y, y(d.y0), y(d.y))
            return y(d.y0) - y(d.y + d.y0);
        })
        .attr("width", x.rangeBand() -1);


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

  svg.append("g")
      .attr("class", "axis axis--y")
      .call(yAxis)
       .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end");
}

Answer 2

如果您尝试使用键＆＃34; total＆＃34;添加新数据集，请尝试添加键＆＃34;总计＆＃34;在您的xData数组中，如下所示，它应该在图表上可见。

var xData = ["total", "A", "B", "C"];

带有d3 js数据数组的堆积图表

2 个答案: