Question

[对不起，标题很糟糕。如果可以，我会改变它。]

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

编辑：我已经可以进行1级输入.data(mydata).enter()。我在这里尝试的是第二级进入。就像mydata是一个包含数组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

你应该像这样使用<section class="hello-block"> <div class="container content-block"> <div class="wrap-header-block"> <header class="page-title"> <hgroup> <div class="title-wrap"> <h1><span class="line"></span>title</h1> <div class="wrap-inner"> <h2>very long title</h2> <div class="button"> <a href="#">feedback</a> </div> </div> </div> </hgroup> </header> </div> </div></section>：

enter

看到这个小提琴：https://jsfiddle.net/t3eyqu7z/

Answer 2

在我看到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
    });

如何为D3 svg中的每个数据元素附加<text>

2 个答案: