Добавление метки к пути D3

Я знаю, как добавить текстовый элемент в простой узел (добавить текст). Проблема в том, что я хотел бы добавить текст в путь, охватывающий несколько узлов. Я создал пример на http://jsfiddle.net/FEM3e/5/ Пожалуйста, проигнорируйте узлы в верхнем левом углу. Итак, у меня есть две группы узлов. И я хотел бы добавить текст для каждой группы. Печатный экран желаемого вывода http://dopisna.bencin.si/screenshot.png.Добавление метки к пути D3

Я установил путь в

force.on("tick", function() { 
     node.attr("transform", function (d) { 
      return "translate(" + d.x + "," + d.y + ")"; 
     }); 
     vis.selectAll("path") 
      .data(groups) 
      .attr("d", singlePath) 
      .enter().insert("path", "g") 
      .style("fill", groupFill) 
      .style("stroke", groupFill) 
      .style("stroke-width", 57) 
      .style("stroke-linejoin", "round") 
      .style("opacity", .7); 
    });

Я попытался добавления текста без успеха. Я прошу какие-то намеки.

источник

2013-09-23 klonitklonit

так что вы попробовали 'append (" text "). Text (function (d) {return d.something;})'? – user1614080

Да. Я думаю, что проблема в том, что этот путь не является узлом ... Поэтому он добавляет текст в мой элемент , но он не отображается, как показано, когда я добавляю его в элемент (node). – klonitklonit

А, может быть, некоторые [Рекомендации W3] (http://www.w3.org/TR/SVG/text.html#TextOnAPath) и, конечно, [Майк] (http://bl.ocks.org/mbostock/ 3151228). – user1614080

OK тогда. Проблема в том, что вы используете текст вместо textPath. Я изменил ваш fiddle, и теперь есть текст, хотя и довольно уродливый текст, добавленный к вашему пути.

Единственное реальное изменение, которое я сделал это добавление этого фрагмента:

 vis.selectAll("text") 
      .data(groups) 
      .enter() 
     .append("text") 
      .attr("x", 8) 
      .attr("dy", 28) 
      .append("textPath") 
     .attr("xlink:href", function (d,i) { return "#path_" + i; }) 
     .text(function (d,i) { return "path_" + i; });

Вы можете видеть, что вы идете через обычный отбор и связывание данных. Затем вы добавляете текст с нужными вами атрибутами (определенно меняйте те, которые я заимствовал у Mikes Bl.ock), а затем добавляем текстовый путь, связывающий его с элементом пути в атрибуте xlink: href. Очевидно, вы затем создаете текст. Одна из самых интересных вещей в TextPath заключается в том, что он позволяет добавлять изогнутые пути.

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

источник

2013-09-23 11:21:15 user1614080

Спасибо. Я уже сдавался. – klonitklonit

Добавление метки к пути D3

ответ

Смежные вопросы