Рисовать текст в d3 arc javascript

Я создал дугу с d3 на 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)")​

Теперь я хочу нарисовать тексты поверх этой дуги (я буду распространять эту дугу на узлы n). Я не могу использовать аккорды непосредственно, потому что у меня нет квадратной матрицы. Мой стол прямоугольный и есть один lhs и более одного rhs. Поэтому я возьму одно небольшое полушарие для одного rhs и одного большого полушария для lhs.

Также я озадачен тем, как здесь нарисовать связи между двумя узлами. не получая подсказки

Я хочу достичь чего-то вроде http://bost.ocks.org/mike/uberdata/:

enter image description here

Ответы

Ответ 1

Уловкой для позиционирования текста вдоль кривой является привязка элемента текста (и текстового) к SVG и присвоение ему атрибута xlink: href, указывающего на идентификатор дуги. Ниже приведен пример.

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");

Аккорды генерируются из путей SVG, каждая из которых состоит из двух дуг и двух кривых безье. Макет Chord создаст их для вас, если вы можете предоставить ему соответствующий вход. Если вы разделите свои данные, вам может понадобиться вручную создать каждый хордовый путь.

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")​

Я слышал, что вы говорите о двух наборах прямоугольных данных, но там есть способ объединить ваши наборы данных в один и добавить нули, если необходимо, чтобы сделать его квадратным. Ваша задача будет намного проще, если вы сможете это сделать, поэтому стоит немного расследовать, если вы этого еще не сделали. Возможно, опубликуйте его как вопрос?