Text along circles in layout D3

Question

I am trying to identify some circles in a circle pack layouttext that flows in a circle itself.

Here is one experimental jsfiddle :

As you can see, you can put text in a circle centered at its beginning. Although the browser drawing of curved SVG text is terrible. But let me say that we do not care.

Here is another jsfiddle

I would like to place curved labels on this graph, in these conditions:

• The circle represents a province (only depth == 1) (BRITISH COLUMBIA, ALBERTA, etc.).
• The sum of the sizes of all children (in other words, the number of seats allocated in parliament) is more than 5.
• The name of the province must be complete. VERSION.

You can see some of my attempts in the code itself. I tried for hours. My main problem is that the circles in the circle are now somewhere in the XY space, whereas in the first jsfiddle all the circles have centers at the origin.

Maybe you can help me by looking at this in more detail.

Basic data is based on this table:

(NOTE: This is somewhat related to the question “Circular packages as nodes of the D3 force layout.” I asked the other day, however this is an independent experiment.)

I decided to use regular SVG arcs instead of d3.svg.arc (). I still think this is the right decision. However, here is what I have now: :) jsfiddle

Answer 1

VividD-.

describeArc 180 , .

descriptionArc, , :

function describeArc(x, y, radius, startAngle, endAngle) {
  var start = polarToCartesian(x, y, radius, startAngle);
  var end = polarToCartesian(x, y, radius, endAngle);
  var arcLength = endAngle - startAngle;
  if (arcLength < 0) arcLength += 360;
  var longArc = arcLength >= 180 ? 1 : 0;
  var d = [
    "M", start.x, start.y,
    "A", radius, radius, 0, longArc, 1, end.x, end.y
  ].join(" ");
  return d;
}

, :

describeArc(d.x, d.y, d.r, -160, 160);

Answer 2

( ): , , . @FernOfTheAndes , svg-.

jsfiddle :

, svg-, d3.svg.arc().

SVG , . svg .

, :

function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
    var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;
    return {
        x: centerX + (radius * Math.cos(angleInRadians)),
        y: centerY + (radius * Math.sin(angleInRadians))
    };
}

function describeArc(x, y, radius, startAngle, endAngle){
    var start = polarToCartesian(x, y, radius, endAngle);
    var end = polarToCartesian(x, y, radius, startAngle);
    var arcSweep = endAngle - startAngle <= 180 ? "0" : "1";
    var d = [
        "M", start.x, start.y, 
        "A", radius, radius, 0, 1, 1, end.x, end.y
    ].join(" ");
    return d;       
}

, :

var arcPaths = vis.append("g")
    .style("fill","navy");
var labels = arcPaths.append("text")
    .style("opacity", function(d) {
        if (d.depth == 0) {
            return 0.0;
        }
        if (!d.children) {
            return 0.0;
        }
        var sumOfChildrenSizes = 0;
        d.children.forEach(function(child){sumOfChildrenSizes += child.size;});
        //alert(sumOfChildrenSizes);
        if (sumOfChildrenSizes <= 5) {
            return 0.0;
        }
        return 0.8;
    })
    .attr("font-size",10)
    .style("text-anchor","middle")
    .append("textPath")
    .attr("xlink:href",function(d,i){return "#s"+i;})
    .attr("startOffset",function(d,i){return "50%";})
    .text(function(d){return d.name.toUpperCase();})

, .