我是D3的新手。我正在研究一个当前的示例。我要做的是为给定数据绘制堆叠的Barchart。
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>
我想要特定数据的"二手"one_answers"未使用"的堆叠条。不知何故,我得到了堆栈,但是堆栈的高度不合适,并且在"二手"one_answers"未使用"的堆栈大小上是互换的,而不是按数据进行的。
。我尝试更改.attr("高度"(中的值,但没有任何效用。
- 删除了堆栈偏移,这将删除归一化。
- 要更改堆栈的顺序,请在绑定数据时更改密钥顺序。
.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>