Javascript 需要其他帮助在屏幕上动态显示文本吗

现在我用d3.js解决了第二个问题，这是我自己无法解决的。我得到了一个动态数组“路径”，当我点击它时，它的长度总是变化的。然后我在svg的起始位置得到了一个“text”变量（112490）。 在你们的帮助下，我现在使用for循环根据控制台上的切换长度来显示“path”数组的名称，它成功了。但是现在我想让名字出现在屏幕上。但是我的

 textNode.attr("dx", 112 + i*2);

线路不工作。我希望文本在x刻度上从112点开始向右移动一点，每个节点

这是文本

var text = svg.append("text")
.attr("dx", 112)
.attr("dy", 490)
.text("1. Node: " )

这是for循环

for (var i=0;i<path.length;i++) {
text.attr("dx", 112 + i*2);
text.text( +i+1+". Node: " + path[i].name);

---

for（var i=0；i不确定这对于您的特定用例是否不正确，但我认为您希望使用“x”而不是“dx”。这就是我在d3.js中将对象向左/向右移动的方式：

textNode.attr("x", 112 + i*2);

编辑：下面是一个添加文本对象并根据索引将其向右移动的示例：

for (var i = 0; i < path.length; i++) {
    var text = svg.append("text")
        .attr("x", 112 + i*2)
        .attr("y", 490)
        .text("1. Node: " )
}

for（变量i=0；i

EDIT2：见Gerardo的答案。D3js有自己的数据绑定和循环方法。
不确定这对于您的特定用例是否不正确，但我认为您希望使用“x”而不是“dx”。这就是我在d3.js中将对象向左/向右移动的方式：

textNode.attr("x", 112 + i*2);

编辑：下面是一个添加文本对象并根据索引将其向右移动的示例：

for (var i = 0; i < path.length; i++) {
    var text = svg.append("text")
        .attr("x", 112 + i*2)
        .attr("y", 490)
        .text("1. Node: " )
}

for（变量i=0；i

EDIT2：见Gerardo的答案。D3js有自己的数据绑定和循环方法。D3中的一个非常基本的原则：不要使用循环，例如
for
循环来显示或显示数据（有时我们确实使用循环，但在非常具体和复杂的情况下，不是这个）。在你的另一个问题中，建议的解决方案使用循环，因为问题中没有
d3.js
标记。但是如果你使用的是d3，那么使用这样的循环就没有什么意义了。它是一个为处理数据而创建的整个库，而你忽略了它最重要的方面

相反，将数据绑定到一个选择。在您的情况下，由于数组不断变化，您需要“输入”、“更新”和“退出”选择

首先，绑定数据：

var texts = svg.selectAll(".texts")
    .data(data);

然后，设置选项：

textsExit = texts.exit().remove();

textsEnter = texts.enter()
    .append("text")
    .attr("class", "texts");

textsUpdate = texts.merge(textsEnter)
    .attr("x", 10)
    .attr("y", (d, i) => i * 16)
    .text(d => d.name);

下面是一个演示，向您展示它是如何工作的。我有一个数据数组，它的长度每秒都在变化：


var svg=d3.select（“body”）.append（“svg”）；
变量数据集=[{
姓名：“富”
}, {
名称：“酒吧”
}, {
名称：“baz”
}, {
姓名：“lorem”
}, {
名称：“ipsum”
}, {
名字：“多洛”
}, {
姓名：“艾美”
}];
打印（数据集）；
设置间隔（（）=>{
var data=dataset.slice（Math.random（）*6）；
打印（数据）；
}, 1000);
功能打印（数据）{
var text=svg。选择全部（“.text”）
.数据（数据）；
textsExit=texts.exit（）.remove（）；
textsEnter=text.enter（）
.append（“文本”）
.attr（“类”、“文本”）；
textsUpdate=text.merge（textssenter.attr（“x”，10）
.attr（“y”，（d，i）=>20+i*16）
.text（（d，i）=>“节点”+（i+1）+”，名称：“+d.name”）；
}
D3中的一个非常基本的原则：不要使用循环，例如
for
循环，来显示或显示数据（有时我们确实使用循环，但在非常具体和复杂的情况下，不是在这个情况下）。在你的另一个问题中，建议的解决方案使用循环，因为问题中没有
d3.js
标记。但是如果你使用的是d3，那么使用这样的循环就没有什么意义了。它是一个为处理数据而创建的整个库，而你忽略了它最重要的方面

相反，将数据绑定到一个选择。在您的情况下，由于数组不断变化，您需要“输入”、“更新”和“退出”选择

首先，绑定数据：

var texts = svg.selectAll(".texts")
    .data(data);

然后，设置选项：

textsExit = texts.exit().remove();

textsEnter = texts.enter()
    .append("text")
    .attr("class", "texts");

textsUpdate = texts.merge(textsEnter)
    .attr("x", 10)
    .attr("y", (d, i) => i * 16)
    .text(d => d.name);

下面是一个演示，向您展示它是如何工作的。我有一个数据数组，它的长度每秒都在变化：


var svg=d3.select（“body”）.append（“svg”）；
变量数据集=[{
姓名：“富”
}, {
名称：“酒吧”
}, {
名称：“baz”
}, {
姓名：“lorem”
}, {
名称：“ipsum”
}, {
名字：“多洛”
}, {
姓名：“艾美”
}];
打印（数据集）；
设置间隔（（）=>{
var data=dataset.slice（Math.random（）*6）；
打印（数据）；
}, 1000);
功能打印（数据）{
var text=svg。选择全部（“.text”）
.数据（数据）；
textsExit=texts.exit（）.remove（）；
textsEnter=text.enter（）
.append（“文本”）
.attr（“类”、“文本”）；
textsUpdate=text.merge（textssenter.attr（“x”，10）
.attr（“y”，（d，i）=>20+i*16）
.text（（d，i）=>“节点”+（i+1）+”，名称：“+d.name”）；
}
嘿，山姆，我想你是对的，但我的计划不是移动对象。我想根据数组的长度创建新的文本对象。这可以做到，你只需附加，然后修改x属性：var text=svg.append（“text”）.attr（“x”，112）；您可以将其放入for循环中，这样它既可以创建新对象，也可以将它们移到右侧。只需添加“+i*2”如果你愿意。谢谢山姆。你能解释一下你将如何把它放在循环中吗？如何使用计数器我是对的？我编辑了我的答案，显示了你将如何添加元素并将其向右移动。你的意思是直接将其粘贴到循环中吗？例如（var i=0；ihey sam，我想你是对的，但我的计划不是移动对象。我想根据数组的长度创建新的文本对象。这可以做到，你只需追加，然后修改x属性：var text=svg.append（“text”）.attr（“x”，112）；您可以将其放入for循环中，这样它将创建新对象并移动t