我正在创建多个饼图。每个饼图都位于一个 div 中。我所有的饼图都彼此相邻呈现。我想在它们之间留出一些间距，这样看起来更好，并且可以适本地容纳图例。
我尝试增加图表的宽度，但没有帮助。我还尝试为 div 分配宽度。那也不管用。
建议？
最佳答案
如果您想要图表之间留出空间，只需留出边距即可。
var margin = {
top: 20,
right: 20,
bottom: 90,
left: 50
},
width = 960 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
接下来创建带有这些边距的 svg，
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
然后将一个组附加到将包含您的饼图的 svg。将组向右平移一段距离 margin.left 并将其向下平移一段距离 margin.top，像这样，
var pie = svg.append("g")
.attr("class", "context")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
注意坐标系原点在左上角，y轴为正向下递增
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<div id="pie">
</div>
<h3>JSON data:</h3>
<div>
<pre id="json"></pre>
</div>
<!-- load the d3.js library -->
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var data = [{
"name": "RT",
"category": "M50",
"value": 1
},
{
"name": "K M",
"category": "M50",
"value": 2
},
{
"name": "SD",
"category": "M60",
"value": 3
},
{
"name": "DK",
"category": "M50",
"value": 4
},
{
"name": "BD",
"category": "M40",
"value": 5
},
{
"name": "KC",
"category": "M40",
"value": 6
},
{
"name": "PM",
"category": "M40",
"value": 7
},
{
"name": "NR",
"category": "M50",
"value": 8
},
{
"name": "LM",
"category": "M50",
"value": 9
},
{
"name": "SL",
"category": "M60",
"value": 1
}
]
// To display json in html page
document.getElementById("json").innerHTML = JSON.stringify(data, undefined, 2);
// ****************** - START PIE Chart - ****************
var margin = {
top: 20,
right: 20,
bottom: 20,
left: 20
},
radius = 100,
width = margin.left + margin.right + (2 * radius),
height = margin.top + margin.bottom + (2 * radius);
var color = ["#2C93E8", "#838690", "#F56C4E", "#A60F2B", "#648C85", "#B3F2C9", "#528C18", "#C3F25C"];
// Generate an array object on categories as a category
var category_count = d3.nest()
.key(function(d) {
return d.category;
})
.rollup(function(leaves) {
return leaves.length;
})
.entries(data);
// console.log("category_count");
// category_count.forEach(function(element) {
// console.log(element)
// });
var category_arcs = d3.pie()
.value(function(d) {
return d.value;
})
(category_count);
// console.log("category_arcs");
// category_arcs.forEach(function(element) {
// console.log(element);
// })
var pie = d3.pie()
.value(function(d) {
return d.category;
})(category_arcs);
var arc = d3.arc()
.outerRadius(radius - 10)
.innerRadius(0);
var labelArc = d3.arc()
.outerRadius(radius - 10)
.innerRadius(radius - 100);
var svg = d3.select("#pie")
.append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + (margin.left + radius) + "," + (margin.top + radius) + ")"); //center of pie
var g = svg.selectAll("arc")
.data(category_arcs)
.enter().append("g")
.attr("class", "arc");
g.append("path")
.attr("d", arc)
.style("fill", function(d, i) {
return color[i];
});
g.append("text")
.attr("transform", function(d) {
return "translate(" + labelArc.centroid(d) + ")";
})
.text(function(d) {
return d.data.key + " = " + d.value;
})
.style("text-anchor", "middle")
.style("font-size", "10px")
.style("fill", "white");
svg.append("text")
.attr("transform", "translate(0," + (0 - radius) + ")")
.text("Count occurences of each category")
.style("text-anchor", "middle")
.style("fill", "black");
// ****************** - END PIE Chart - ****************
// ****************** - START SECOND PIE Chart - *******
var category_sum = d3.nest().key(function(d) {
return d.category;
})
.rollup(function(leaves) {
return d3.sum(leaves, function(d) {
return d.value;
});
}).entries(data)
.map(function(d) {
return {
Category: d.key,
totalValue: d.value
};
});
var category_sum_arcs = d3.pie()
.value(function(d) {
return d.totalValue;
})
(category_sum);
var arcSum = d3.arc()
.outerRadius(radius - 10)
.innerRadius(0);
var labelArc = d3.arc()
.outerRadius(radius - 40)
.innerRadius(radius - 50);
var svg = d3.select("#pie")
.append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + (margin.left + radius) + "," + (margin.top + radius) + ")"); // Moving the center point. 1/2 the width and 1/2 the height
var g = svg.selectAll("arc")
.data(category_sum_arcs)
.enter().append("g")
.attr("class", "arc");
g.append("path")
.attr("d", arcSum)
.style("fill", function(d, i) {
return color[i];
});
// console.log("category_sum_arcs");
// category_sum_arcs.forEach(function(element) {
// console.log(element);
// })
g.append("text")
.attr("transform", function(d) {
return "translate(" + labelArc.centroid(d) + ")";
})
.text(function(d) {
// console.log(d.key);
return d.data.Category + " = " + d.value;
})
.style("text-anchor", "middle")
.style("font-size", "10px")
.style("fill", "white");
svg.append("text")
.attr("transform", "translate(0," + (0 - radius) + ")")
.style("text-anchor", "middle")
.text("Sum value of each category")
.style("fill", "black");
// ****************** - END SECOND PIE Chart - *******
</script>
</body>关于javascript - DC.js 使图表容器或 div 更宽以正确显示图例，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45867360/