如何附加一个 <text> 对于D3 SVG中数据的每个元素

Question

[对不起，标题的表述方式很糟糕。 如果可以的话，我会更改它。]

我正在寻找一种从数据中的一个或多个数组中添加文本元素的方法。

编辑：我已经可以做1级输入.data(mydata).enter() 。 我在这里尝试的是进入第二层。 就像mydata是包含数组mydata.sourceLinks的对象mydata.sourceLinks 。

cf. 这个小代码段中的注释：

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（d）.enter（）尝试了很多不同的方法，但是它从未起作用，并且出现了很多错误。

我还尝试插入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

您应该这样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/

Answer 2

在我看到您的评论之前，您的问题还不清楚。 因此，如果您要处理的是数组数组的数据，则可以在嵌套元素中进行多个“输入”选择，因为子级将从父级继承数据。

假设我们有这个数组数组：

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