xxxxxxxxxx
<meta charset="utf-8">
<style>
body {
text-align: center;
margin: 10px;
}
</style>
<body>
<div class='chart'></div>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
// Define the data as a two-dimensional array of numbers. If you had other
// data to associate with each number, replace each number with an object, e.g.,
// `{key: "value"}`.
var data = [
// [3.053204794, 1.590265768],
[0.053204794, 1.590265768],
[0.314102564, 0.685897436],
[0.504273504, 0.495726496],
[0.290776446, 0.709223554],
[0.502403846, 0.497596154],
[0.554131054, 0.445868946],
[0.053152684, 0.946847316],
[0.165064103, 0.834935897],
[0.651749857, 0.348250143],
[0.630316249, 0.369683751],
[0.074010327, 0.925989673],
[0.083969466, 0.916030534],
];
// Define the margin, radius, and color scale. The color scale will be
// assigned by index, but if you define your data using objects, you could pass
// in a named field from the data object instead, such as `d.name`. Colors
// are assigned lazily, so if you want deterministic behavior, define a domain
// for the color scale.
var width = window.innerWidth,
height = window.innerHeight,
m = 35,
radius = width / data.length - m,
z = d3.scaleOrdinal().domain([0, 3])
.range(d3.schemeSet2);
var svg = d3.select(".chart").append("svg")
.attr("width", width)
.attr("height", height);
var g2 = svg.append("g");
var pie = d3.pie()
.value(function (d) { return d; })
.sort(null);
var arc = d3.arc()
.innerRadius(radius / 1.5 + m)
.outerRadius(radius);
// Append one g element for each row in the csv and bind data to it:
var points = g2.selectAll("g")
.data(data)
.enter().append("g")
.attr("width", (radius + m) * 2)
.attr("height", (radius + m) * 2)
.style("fill", "red")
// .style("stroke", "violet")
.style("border", "1px solid blue")
.attr("transform", function (d, i) {
if (i >= data.length / 4) {
return "translate(" + (radius + m) * 4 * (data.length - i - 1 + .5) + "," + (radius + m) * 3 + ")"
} else {
return "translate(" + (radius + m) * 4 * (i + .5) + "," + (radius + m) + ")"
}
})
.attr("id", function (d, i) { return "chart" + i; })
.append("g")
.attr("class", "pies")
// .append("text")
// .text(function (d, i) { return i; });
// The data for each svg element is a row of numbers (an array). We pass that to
// d3.layout.pie to compute the angles for each arc. These start and end angles
// are passed to d3.svg.arc to draw arcs! Note that the arc radius is specified
// on the arc, not the layout.
points.selectAll("path")
.data(pie)
.enter().append("path")
.attr("d", arc)
.style("fill", function (d, i) {
return z(i);
});
points.append("text")
.attr("dy", "0.5em")
.style("text-anchor", "middle")
.text(function (d, i) { return d3.format(",.0%")(d[0]); });
points.append("text")
.attr("dy", "5em")
.style("text-anchor", "middle")
.text(function (d, i) { return d3.format(",.0%")(d[1]); });
</script>
https://d3js.org/d3.v5.min.js