2
我正在創建多個餅圖。每個餅圖都駐留在一個div中。我所有的餅圖都相互呈現。我想給他們之間的一些間距，所以看起來更好，傳說可以妥善適應。DC.js使圖表容器或div更寬以正確顯示圖例
我試圖增加圖表的寬度，但沒有幫助。我也試着給div分配一個寬度。那也行不通。
對此提出建議？
A
回答
1
如果您希望圖表之間的空間只需放入邊距。
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>相關問題
- 1. 使用dc.js和crossfilter.js在barChart中正確顯示容器寬度
- 2. dc.js圖例不顯示
- 3. 如何使dc.js餅圖正確顯示數據？
- 4. 在圖例中顯示帶有正確線寬的線
- 5. 不能讓圖例在圖表上正確顯示
- 6. Matplotlib：圖例顯示不正確
- 7. R ggplotly：圖例顯示不正確
- 8. 正確的方式顯示比例div與圖像
- 9. 互動圖表（由dc.js）沒有正確更新對方
- 10. AngularJS圖表 - 顯示圖例
- 11. 如何在圖表中以正確的順序顯示圖像？
- 12. 以正確的比例顯示背景圖像
- 13. 軸正確顯示比例，但圖形條不正確繪製
- 14. 在點擊其他圖表後顯示排行圖（dc.js）
- 15. 瀏覽器圖像顯示不正確
- 16. Google圖表無法正確顯示值
- 17. Chartist js圖表顯示不正確
- 18. jqplot無法顯示圖表正確
- 19. 圖像顯示不正確
- 20. 圖標顯示不正確
- 21. 圖片顯示不正確
- 22. 圖像顯示不正確
- 23. 正確的圖像顯示
- 24. 圖像顯示不正確
- 25. DC.js折線圖 - 不顯示線條
- 26. dc.js：條形圖不能顯示
- 27. 確定（識別）dc.js圖表類型
- 28. Matlab - 繪圖的圖例顯示不正確的顏色
- 29. dc.js：使用餅圖創建sunburst圖表
- 30. 谷歌地圖不顯示整個地圖上的div容器
利潤率添加到您的SVG –