我正在编写一个数据条形图,显示多种攻击策略和其他信息。策略显示在 X 轴上,并且已排序。我希望当有多个相同的策略相互堆叠时出现这种情况。堆叠条形图的所有其他示例都使用 .stack,我很确定这不适用于这种情况。
<!DOCTYPE html>
<meta charset="utf-8">
<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>
<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>
<script>
// set the dimensions and margins of the graph
var margin = {top: 30, right: 30, bottom: 70, left: 60},
width = 1000 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
barheight = 60;
// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
.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 + ")");
// Parse the Data
d3.csv("https://raw.githubusercontent.com/BaileyHCUDenver/KPCUDTEST/main/test-data-short.csv", function(data) {
// X axis
var x = d3.scaleBand()
.range([ 0, width ])
.domain(data.map(function(d) { return d.tactic; }))
.padding(0.2);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x))
.selectAll("text")
.attr("transform", "translate(-10,0)rotate(-)")
.style("text-anchor", "end");
// Add Y axis //Not needed to show the Y axis because their is no need for it
//var y = d3.scaleLinear()
//.domain([0, 20])
//.range([ height, 0]);
//svg.append("g")
//.call(d3.axisLeft(y));
// Bars
svg.selectAll("mybar")
.data(data)
.enter()
.append("rect")
.attr("x", function(d) { return x(d.tactic); })
.attr("y", function(d) {
return height - barheight;
})
.attr("width", x.bandwidth())
.attr("height", function(d) { return barheight; })
.attr("fill", "#FFFFFF") //Fill in with white
.attr("stroke", "black") // Black outline color
.attr("stroke-width", ); // Outline width (adjust as needed)
svg.selectAll("mytext")
.data(data)
.enter()
.append("text")
.text(function (d) { return d.title; }) // Use the 'value' field from your data
.attr("x", function (d) { return x(d.tactic) + x.bandwidth() / 2; }) // Center the text
.attr("y", function (d) { return height - barheight + 10; }) // Adjust the vertical position
.style("text-anchor", "middle") // Center-align the text
.style("font-size", "9px") // Set font size
.style("fill", "black"); // Set text color
svg.selectAll("mytext")
.data(data)
.enter()
.append("text")
.text(function (d) { return d.tactic; }) // Use the 'value' field from your data
.attr("x", function (d) { return x(d.tactic) + x.bandwidth() / 2; }) // Center the text
.attr("y", function (d) { return height - barheight + 20; }) // Adjust the vertical position
.style("text-anchor", "middle") // Center-align the text
.style("font-size", "9px") // Set font size
.style("fill", "black"); // Set text color
})
</script>
任何帮助将不胜感激,因为我不知道如何制作,使盒子堆叠在一起
使用
tacticCount
保存战术数量。
将栏(
rect
)和文本放入<g>
中,在<g>
上更改taticCount
的translateY。
// set the dimensions and margins of the graph
var margin = {
top: 30,
right: 30,
bottom: 70,
left: 60
},
width = 1000 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
barheight = 60;
// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
.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 + ")");
// Parse the Data
d3.csv("https://raw.githubusercontent.com/BaileyHCUDenver/KPCUDTEST/main/test-data-short.csv", function(data) {
// X axis
var x = d3.scaleBand()
.range([0, width])
.domain(data.map(function(d) {
return d.tactic;
}))
.padding(0.2);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x))
.selectAll("text")
.attr("transform", "translate(-10,0)rotate(-)")
.style("text-anchor", "end");
// Add Y axis //Not needed to show the Y axis because their is no need for it
//var y = d3.scaleLinear()
//.domain([0, 20])
//.range([ height, 0]);
//svg.append("g")
//.call(d3.axisLeft(y));
// Bars
let tacticCount = {}
const barItemContainers = svg.selectAll("mybar")
.data(data)
.enter()
.append('g')
.attr('transform', (d) => {
tacticCount[d.tactic] = (tacticCount[d.tactic] || 0) + 1
return `translate(${x(d.tactic)},${height - barheight * tacticCount[d.tactic]})`
});
barItemContainers.append("rect")
.attr("width", x.bandwidth())
.attr("height", barheight)
.attr("fill", "#FFFFFF") //Fill in with white
.attr("stroke", "black") // Black outline color
.attr("stroke-width", ); // Outline width (adjust as needed)
barItemContainers.append("text")
.text(d => d.title) // Use the 'value' field from your data
.attr("x", x.bandwidth() / 2) // Center the text
.style("text-anchor", "middle") // Center-align the text
.style("font-size", "9px") // Set font size
.style("fill", "black"); // Set text color
barItemContainers.append("text")
.text(d => d.tactic) // Use the 'value' field from your data
.attr("x", x.bandwidth() / 2) // Center the text
.attr("y", 20) // Adjust the vertical position
.style("text-anchor", "middle") // Center-align the text
.style("font-size", "9px") // Set font size
.style("fill", "black"); // Set text color
})
<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>
<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>