D3 堆叠条形图堆叠高度问题

Question

我是 D3 新手。我正在研究一个当前的例子。我想要做的是绘制给定数据的堆叠条形图。

var data = [{
    "name": "ABC",
    "total": 4,
    "used": 1,
    "type": "Unused"
  },
  {
    "name": "ABC",
    "total": 4,
    "used": 1,
    "type": "Used"
  },
  {
    "name": "PQR",
    "total": 3,
    "used": 1,
    "type": "Unused"

  },
  {
    "name": "PQR",
    "total": 3,
    "used": 1,
    "type": "Used"
  },
  {
    "name": "XYZ",
    "total": 2,
    "used": 1,
    "type": "Unused"

  },
  {
    "name": "XYZ",
    "total": 2,
    "used": 1,
    "type": "Used"
  },
  {
    "name": "LMN",
    "total": 1,
    "used": 0,
    "type": "Unused"

  },
  {
    "name": "LMN",
    "total": 1,
    "used": 0,
    "type": "Used"

  },
  {
    "name": "OPQ",
    "total": 1,
    "used": 0,
    "type": "Unused"


  },
  {
    "name": "OPQ",
    "total": 1,
    "used": 0,
    "type": "Used"
  },

]
var svg = d3.select("svg"),
  margin = {
    top: 20,
    right: 60,
    bottom: 30,
    left: 40
  },
  width = svg.attr("width") - margin.left - margin.right,
  height = svg.attr("height") - margin.top - margin.bottom,

  g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var tooltip = d3.select("body").append("div").attr("class", "toolTip");


var x = d3.scaleBand().range([0, width]).padding(0.1);
var y = d3.scaleLinear().range([height, 0]);
var color = d3.scaleOrdinal(d3.schemeCategory20c);
var z = d3.scaleOrdinal()
  .range(["#fff", "#F18111"]);

var stack = d3.stack()
  .order(d3.stackOrderNone)
  .offset(d3.stackOffsetExpand);



data.forEach(function(d) {
  d.unused = d.total - d.used
});

x.domain(data.map(function(d) {
  return d.name;
}));
y.domain([0, d3.max(data, function(d) {
  return d.total
})]);
// z.domain(["used", "unused"]);

var serie = g.selectAll(".serie")
  .data(stack.keys(["used", "unused"])(data))
  .enter().append("g")
  .attr("class", "serie")
  .attr("fill", function(d, i) {
    return color(i);
  })
  .attr("opacity", "0.9");

serie.selectAll("rect")
  .data(function(d) {
    return d;
  })
  .enter().append("rect")
  .attr("x", function(d) {
    return x(d.data.name);
  })
  .attr("y", function(d) {
    return y(d[1]);
  })
  .attr("height", function(d) {
    return y(d[0]) - y(d[1]);
  })
  .attr("width", x.bandwidth())
  .text(function(d) {
    return y(d.data.total)
  })


// gridlines in y axis function
function make_y_gridlines() {
  return d3.axisLeft(y)
    .ticks(10)
}


// add the Y gridlines
g.append("g")
  .attr("class", "grid")
  .call(make_y_gridlines()
    .tickSize(-width)
    .tickFormat("")
  )
  .attr("opacity", "0.1")

g.append("g")
  .attr("class", "axis axis--x")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x));

g.append("g")
  .attr("class", "axis axis--y")
  .call(d3.axisLeft(y));

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<svg width='600' height='300'></svg>

我想要针对特定数据的 "used" 和 "unused" 的堆积条。不知何故我得到了堆栈，但是堆栈的高度不正确并且超过 "used" 和 "unused" 的堆栈大小是互换的，而不是根据数据。

我尝试更改 .attr("height") 中的值，但没有任何效果。

Answer 1

删除了堆栈偏移量，这将删除规范化。
要更改栈的顺序，请在绑定数据时更改键的顺序。 .data(stack.keys(["unused", "used"])(data))

var svg = d3.select("svg"),
  margin = {
    top: 20,
    right: 60,
    bottom: 30,
    left: 40
  },
  width = svg.attr("width") - margin.left - margin.right,
  height = svg.attr("height") - margin.top - margin.bottom,

  g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var tooltip = d3.select("body").append("div").attr("class", "toolTip");


var x = d3.scaleBand().range([0, width]).padding(0.1);
var y = d3.scaleLinear().range([height, 0]);
var color = d3.scaleOrdinal(d3.schemeCategory20c);
var z = d3.scaleOrdinal()
  .range(["#fff", "#F18111"]);

var stack = d3.stack()
  .order(d3.stackOrderNone);

var data = [{
    "name": "ABC",
    "total": 4,
    "used": 1,
    "type": "Unused"
  },

  {
    "name": "PQR",
    "total": 3,
    "used": 1,
    "type": "Unused"

  },

  {
    "name": "XYZ",
    "total": 2,
    "used": 1,
    "type": "Unused"

  },

  {
    "name": "LMN",
    "total": 1,
    "used": 0,
    "type": "Unused"

  },

  {
    "name": "OPQ",
    "total": 1,
    "used": 0,
    "type": "Unused"


  }

];

data.forEach(function(d) {
  d.unused = d.total - d.used
});

//console.log(data);

x.domain(data.map(function(d) {
  return d.name;
}));
y.domain([0, d3.max(data, function(d) {
  return d.total
})]);
// z.domain(["used", "unused"]);

var serie = g.selectAll(".serie")
  .data(stack.keys(["unused", "used"])(data))
  .enter().append("g")
  .attr("class", "serie")
  .attr("fill", function(d, i) {
    return color(i);
  })
  .attr("opacity", "0.9");

serie.selectAll("rect")
  .data(function(d) {
    return d;
  })
  .enter().append("rect")
  .attr("x", function(d) {
    return x(d.data.name);
  })
  .attr("y", function(d) {
    return y(d[1]);
  })
  .attr("height", function(d) {
    return y(d[0]) - y(d[1]);
  })
  .attr("width", x.bandwidth())
  .text(function(d) {
    return y(d.data.total)
  })


// gridlines in y axis function
function make_y_gridlines() {
  return d3.axisLeft(y)
    .ticks(10)
}


// add the Y gridlines
g.append("g")
  .attr("class", "grid")
  .call(make_y_gridlines()
    .tickSize(-width)
    .tickFormat("")
  )
  .attr("opacity", "0.1")

g.append("g")
  .attr("class", "axis axis--x")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x));

g.append("g")
  .attr("class", "axis axis--y")
  .call(d3.axisLeft(y));

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width=800 height=500></svg>

D3 堆叠条形图堆叠高度问题

D3 Stacked Bar Chart stack height issue

d3.js

bar-chart

stacked-chart