dessiner du texte en d3 arc javascript

J'ai créé un arc avec d3 sur http://jsfiddle.net/PRb93/1/

var vis = d3.select("body").append("svg")
var pi = Math.PI;

var arc = d3.svg.arc()
    .innerRadius(300)
    .outerRadius(320)
    .startAngle(0 * (pi/180))
    .endAngle(-pi)

vis.append("path")
    .attr("d", arc)
    .attr("transform", "translate(350,350)")​

Maintenant, je tiens à attirer des textes sur le dessus de cet arc (je vais distribuer cet arc en n nœuds). Je ne peux pas utiliser de la corde de mise en page directement, parce que je n'ai pas une matrice carrée. Ma table est rectangulaire et il y en a un à gauche et plus de rhs. Donc je vais prendre un petit hémisphère pour un rhs et une grande hémisphère gauche.

aussi je suis perplexe comment établir des connexions entre deux nœuds ici. n'obtenant aucune idée de

Je veux arriver à quelque chose comme http://bost.ocks.org/mike/uberdata/ :

dessiner du texte en d3 arc javascript

source d'informationauteur Dipro Sen

  1. 15

    Le truc pour le positionnement du texte le long d'une courbe est de joindre un texte (et textpath) de l'élément SVG et de lui donner un attribut xlink:href qu'points à l'ID d'un arc. Voir ci-dessous pour un exemple.

    var svg = d3.select("body").append("svg"),
    pi = Math.PI;

var arc = d3.svg.arc()
    .innerRadius(150)
    .outerRadius(180)
    .startAngle(0)
    .endAngle(-pi/2)

var path = svg.append("path")
    .attr("d", arc)
    .attr("id", "path1")
    .attr("transform", "translate(200,200)")
    .attr("fill","#ccf")

//Add a text label.
var text = svg.append("text")
    .attr("x", 6)
    .attr("dy", 15);

text.append("textPath")
    .attr("stroke","black")
    .attr("xlink:href","#path1")
    .text("abc");

    Les accords sont générés à partir des chemins SVG, chacun composé de deux arcs de cercle et de deux courbes de bézier. L'Accord de mise en page va générer pour vous si vous pouvez fournir avec l'entrée appropriée. Si vous gardez vos jeux de données distincts, vous pourriez avoir besoin de créer manuellement chaque accord chemin.

    var svg = d3.select("body").append("svg")
var pi = Math.PI;

var arc = d3.svg.chord()
    .source({startAngle:0.1,endAngle:0.2})
    .target({startAngle:0.6,endAngle:0.8})
    .radius(100)

var path = svg.append("path")
    .attr("d", arc)
    .attr("id", "path1")
    .attr("transform", "translate(200,200)")
    .attr("fill","#ccf")​

    J'entends ce que vous dites au sujet de deux ensembles de la forme rectangulaire de données, mais il est possible, il ya un moyen de combiner vos jeux de données dans une seule et ajouter des zéros si nécessaire pour la rendre carrée. Votre tâche sera beaucoup plus simple si vous pouvez faire cela, alors il vaut la peine un peu de l'enquête si vous ne l'avez pas déjà. Peut-être poster une question?