Как добавить <text> для каждого элемента данных в D3 svg

Question

[Извините, что заголовок был довольно плохо сформулирован. Я бы изменил его, если бы мог.]

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

EDIT: Я уже могу войти на уровень 1 .data(mydata).enter(). То, что я здесь делаю, - это второй уровень входа. Например, если mydata был объектом, который содержал массив mydata.sourceLinks.

ср. в коментарии в этом небольшом фрагменте кода:

var c = svg.append("g") 
    .selectAll(".node") 
    .data(d.nodes) 
    .enter() 
    .append("g") 
    .attr("class", "node") 
    .attr("transform", function(i) { 
     return "translate(" + i.x + "," + i.y + ")" 
    }) 
c.append("text") 
    .attr("x", -200) 
    .attr("y", 30) 
    .attr("text-anchor", "start") 
    .attr("font-size","10px") 
    .text(function(d){ 

     // d.sourceLinks is an array of elements 
     // console.log(d.sourceLinks[0].target.name); 
     // Here I would like to apped('text') for each of the elements in the array 
     // and write d.sourceLinks[i].target.name in this <text> 

    }) 
    ; 

---

Я пробовал много разных вещей с .data (г) Введите желанную(), но он никогда не работал, и я получил много о ошибок.

Я также попытался вставить html вместо текста, где я мог бы вставлять строки (это в конечном итоге то, чего я пытаюсь достичь).

Я также попытался

c.append("foreignobject") 
    .filter(function(i) { // left nodes 
     return i.x < width/2; 
    }) 
    .attr('class','sublabel') 
    .attr("x", -200) 
    .attr("y", 30) 
    .attr("width", 200) 
    .attr("height", 200) 
    .append("body") 
    .attr("xmlns","http://www.w3.org/1999/xhtml") 
    .append("div"); 

, но это никогда не обнаруживался где-нибудь в моей странице.

Answer 1

Ваш вопрос не совсем ясно, пока я не увижу your comment. Таким образом, если вы хотите иметь дело с данными, которые представляют собой массив массивов, вы можете иметь несколько «входящих» вариантов во вложенных элементах, поскольку ребенок наследует данные от родителя.

Предположим, что у нас есть этот массив массивов:

var data = [ 
    ["colours", "green", "blue"], 
    ["shapes", "square", "triangle"], 
    ["languages", "javascript", "c++"] 
]; 

Мы будем связывать данные по группам, как вы это делали. Затем для каждой группы мы привяжем отдельный массив к текстовым элементам. Это важная функция в функции данных:

.data(d => d) 

Это делает выбор дочернего объекта отдельным массивом родительского выбора.

Проверьте фрагмент:

var data = [ 
 
    ["colours", "green", "blue"], 
 
    ["shapes", "square", "triangle"], 
 
    ["languages", "javascript", "c++"] 
 
]; 
 

 
var svg = d3.select("body") 
 
    .append("svg") 
 
    .attr("width", 500) 
 
    .attr("height", 200); 
 

 
var groups = svg.selectAll("groups") 
 
    .data(data) 
 
    .enter() 
 
    .append("g") 
 
    .attr("transform", (d, i) => "translate(" + (50 + i * 100) + ",0)"); 
 

 
var texts = groups.selectAll("texts") 
 
    .data(d => d) 
 
    .enter() 
 
    .append("text") 
 
    .attr("y", (d, i) => 10 + i * 20) 
 
    .text(d => d);

<script src="https://d3js.org/d3.v4.min.js"></script>

Теперь, что касается вашего кода. если d.nodes является массивом массивов, эти изменения:

var c = svg.append("g") 
    .selectAll(".node") 
    .data(d.nodes) 
    .enter() 
    .append("g") 
    .attr("class", "node") 
    .attr("transform", function(i) { 
     return "translate(" + i.x + "," + i.y + ")" 
    });//this selection remains the same 

var myTexts = c.selectAll("myText")//a new selection using 'c' 
    .data(function(d){ return d;})//we bind each inner array 
    .enter()//we have a nested enter selection 
    .append("text") 
    .attr("x", -200) 
    .attr("y", 30) 
    .attr("text-anchor", "start") 
    .attr("font-size", "10px") 
    .text(function(d) { 
     return d;//change here according to your needs 
    }); 

Answer 2

Вы должны использовать enter так:

var data = ["aaa", "abc", "abd"]; 

var svg = d3.select("body").append("svg") 
    .attr("width", 200) 
    .attr("height", 200); 

svg.selectAll("text") 
    .data(data) 
    .enter() 
    .append("text") 
    .attr("x", function(d,i) { 
     return 20 + 50 * i; 
    })   
    .attr("y", 100) 
    .text(function(d) { return d; }); 

Смотрите эту скрипку: https://jsfiddle.net/t3eyqu7z/