arc with circles

arc-with-circles.markdown

arc with circles

A Pen by Lorenzo Brutti on CodePen.

License.

index.html

<div id="chart"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.12.0/d3.min.js"></script>
<script>
var data = [
  {
    name: "punti",
    count: 3,
    color: "#fff000"
  },
  {
    name: "max",
    count: 7,
    color: "#f8b70a"
  }
];
var totalCount = data.reduce((acc, el) => el.count + acc, 0);
var image_width = 32;
var image_height = 32;
var width = 540,
  height = 540,
  radius = 200,
  outerRadius = radius - 10,
  innerRadius = 100;
var cornerRadius = innerRadius;
var markerRadius = (outerRadius - innerRadius) / 2;
var arc = d3
  .arc()
  .outerRadius(outerRadius)
  .innerRadius(innerRadius)
  .cornerRadius(cornerRadius);

var pie = d3
  .pie()
  .sort(null)
  .value(function(d) {
    return d.count;
  });

var svg = d3
  .select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var pieData = pie(data);
var g = svg
  .selectAll(".arc")
  .data(pieData)
  .enter()
  .append("g");

var path = g
  .append("path")
  .attr("d", arc)
  .style("fill", function(d, i) {
    return d.data.color;
  });

var marker = svg
  .append("defs")
  .append("marker")
  .attr("id", "endmarker")
  .attr("overflow", "visible")
  .append("circle")
  .attr("cy", 0)
  .attr("cx", 0)
  .attr("r", markerRadius)
  .attr("fill", "red");
g.attr("marker-end", "url(#endmarker)");

g
  .append("circle")
  .attr("cx", function(d) {
    let path = d3.select(this.parentNode);
    var x = arc.centroid(d)[0];
    return x;
  })
  .attr("cy", function(d) {
    var y = arc.centroid(d)[1];
    console.log(d3.select(this).attr("cx"));
    return y;
  })
  .attr("fill", d => d.data.color)
  .attr("stroke", "black")
  .attr("r", (outerRadius - innerRadius) / 2);
</script>

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.12.0/d3.min.js"></script>