我正在尝试获取多层次的饼图/甜甜圈图。数据没有数值，应均匀分布在环中。因此，我给了他们全部相同的号码。也许有一种更优雅的方法，但是在简单的数据集中它可以工作。可悲的是，现在我获取的数据集与我的最终目标更加相似，并且它停止了工作。我是一个血腥的d3新手，我将非常感谢任何帮助，因为我没有收到任何错误消息，可能会出错。干杯，非常感谢！ （我的脚本在html文件中）。我以此为灵感：fiddle
编辑：要查看我的图形，我使用本地网络服务器，因此可以在本地加载内容
/* Old simple data set
var dataset = {
ring0 : [1],
ring1: [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
ring2: [1,1,1],
ring3: [1,1,1,1,1,1,1,1,1,1,1,1,1,1],
ring4: [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
}; */
var dataset = {
ring0:[{"Arbeitsbereich":"IT", "number": 1}],
ring1:[{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1}],
ring2:[{"Arbeitsbereich":"IT", "number": 1}, {"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1}],
ring3:[{"Arbeitsbereich":"IT", "number": 1}, {"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1}],
ring4:[{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1}]
};
var width = d3.select('#pie-chart').node().offsetWidth,
height = 600,
cwidth = 60;
var colorO = '#8a0101';
var colorA = '#db3131';
var colorB = '#ff4a4a';
var colorC = '#aa0000';
var colorD = '#ff0000';
var pie = d3.pie()
.value(function(d){return d.number;});
console.log(pie(dataset.ring1))
var svg = d3.select("#duration svg")
.append("g") //used to group svg elements
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
console.log(dataset);
var arc = d3.arc();
var gs = svg.selectAll("g").data(pie(dataset)).enter().append("g");
var path = gs.selectAll("path")
.data(function(d) { return pie(d); }) //.data(function(d, i)
.enter().append("path")
.attr("fill", function(d, i, j) {
switch (j) {
case 0:
return colorO(d.dataset.number);
break;
case 1:
return colorA(d.dataset.number);
break;
case 2:
return colorB(d.dataset.number);
break;
case 3:
return colorC(d.dataset.number);
break;
case 4:
return colorD(d.dataset.number);
}
})
.attr("d", function(d, i, j) {
if (j == 0) {
return arc.innerRadius(0).outerRadius(40)(d);
} else if (j == 1) {
return arc.innerRadius(40).outerRadius(cwidth * (j + 1))(d);
} else {
return arc.innerRadius(cwidth * j).outerRadius(cwidth * (j + 1))(d);
}
});body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: auto;
position: relative;
width: 960px;
}
text {
font: 10px sans-serif;
}
form {
position: absolute;
right: 10px;
top: 10px;
}<!DOCTYPE html>
<html>
<head>
<script src="https://d3js.org/d3.v5.js"></script>
<link rel="stylesheet" href="./style.css" type="text/css" />
<meta charset="utf-8"
</head>
<body>
<div id="pie-chart">
<svg style="height:1000px;width:100%"></svg>
</div>
</body>
</html>
答案 0 :(得分：0)
当您不熟悉D3时，它会使您的大脑有些不适，请放心！
我做了一些小改动，以使您的代码在下面的“全部合并”的html中工作。其中一些看起来像是在调试时可能会逐渐蔓延的错误，而另一些则更多地是在理解上。我认为关键是：
d3.select("#duration svg")实际上没有指向文档中的任何内容，因此实际上没有发生任何其他事情，这就是为什么您没有得到任何错误的原因。当您从小提琴中获取代码时，这可能就是我所说的“ facepalm”错误，如果将其更改为d3.select("#pie-chart svg")，则应该开始看到一些更严重的错误！为了调试这种事情，我总是去浏览器调试工具并检查文档，您将看到svg下没有<g>元素，然后从那里开始解决问题{}括起来表示。在d3中绑定这是一件很奇怪的事情，我们通常绑定在一个对象数组上，并根据这些数据项执行不同的操作。果然，在小提琴中，对象是相同的形状，但它不仅绑定在对象上（本来是.data(dataset)，而是使用d3.values()将数据的形状更改为首先用.data(d3.values(dataset)) pie(d)数据集的地方了。本示例使用两个级别的数据联接（如果有足够的时间和茶，请检查https://bost.ocks.org/mike/nest/！）顶级数据联接（即.data(d3.values(dataset))在甜甜圈图中每个“环”都有一个元素） -所以每个环都有一个<g>元素，其中所有环的数据都作为一个对象。然后，还有另一个数据联接（.data(function(d, i) { return pie(d); })在小提琴中，在下面做了一些细微的不同），以在圆环的<path>元素中创建一组<g>元素，而每个<path>都是甜甜圈的一部分。希望能为您提供一些指示，这就是我最终将您的代码混搭到可以在屏幕上显示内容的方式的方法，尽管您可能希望对颜色进行分类！注意：我只是通过说所有数据访问器都返回1来简化事情（因为在您的情况下，您总是想要均匀分割的环，因此每个数据点的形状无关紧要，它们都计为1） ）
<!DOCTYPE html>
<html>
<head>
<script src="https://d3js.org/d3.v5.js"></script>
<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: auto;
position: relative;
width: 960px;
}
text {
font: 10px sans-serif;
}
form {
position: absolute;
right: 10px;
top: 10px;
}
</style>
<meta charset="utf-8">
</head>
<body>
<div id="pie-chart">
<svg style="height:1000px;width:100%"></svg>
</div>
<script>
/* Old simple data set */
/* var dataset = {
ring0:[1],
ring1:[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
ring2:[1,1,1],
ring3:[1,1,1,1,1,1,1,1,1,1,1,1,1,1],
ring4:[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
};
*/
///*
var dataset = {
ring0:[{"Arbeitsbereich":"IT", "number": 1}],
ring1:[{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1}],
ring2:[{"Arbeitsbereich":"IT", "number": 1}, {"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1}],
ring3:[{"Arbeitsbereich":"IT", "number": 1}, {"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1}],
ring4:[{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1}]
};
var width = d3.select('#pie-chart').node().offsetWidth,
height = 600,
cwidth = 60;
var colorO = '#8a0101';
var colorA = '#db3131';
var colorB = '#ff4a4a';
var colorC = '#aa0000';
var colorD = '#ff0000';
var pie = d3.pie().value(function(d){return 1})
var svg = d3.select("#pie-chart svg")
.append("g") //used to group svg elements
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var arc = d3.arc();
var gs = svg.selectAll("g")
.data(d3.values(dataset)).enter().append("g");
var path = gs
.selectAll("path")
.data(function(d,i) {
return pie(d).map(function(e){e.ringIndex = i; return e});
})
.enter()
.append("path")
.attr("fill", function(d, i, j) {
switch (i) {
case 0:
return colorO;
break;
case 1:
return colorA;
break;
case 2:
return colorB;
break;
case 3:
return colorC;
break;
case 4:
return colorD;
}
})
.attr("d", function(d, i, j) {
return arc.innerRadius(cwidth * d.ringIndex).outerRadius(cwidth * (d.ringIndex + 1))(d);
});
</script>
</body>
</html>