Question

现在我使用d3.js遇到了第二个问题，我自己无法解决。我有一个动态阵列＆＃34;路径＆＃34;当我点击时，它的长度总是会改变。然后我得到了一个＆＃34;文本＆＃34;变量在svg（112,490）的起始位置。在你们的帮助下，我现在使用for-loop来显示＆＃34;路径＆＃34;的名称。数组根据它在控制台上的切换长度而起作用。但现在我想让名字出现在屏幕上。但是我的

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

行不起作用。我希望文本在x-scale上向右移动，从点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);

Answer 1

不确定这对于您的特定用例是否不正确，但我认为您想要执行“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: " )
}

EDIT2：见Gerardo的回答。 D3js有自己的方法来绑定和循环数据。

Answer 2

D3中的一个非常基本的原则：不要使用循环（例如SET collation_connection = 'utf8_unicode_ci';循环）来显示或显示数据（有时我们会使用循环，但是非常具体和复杂的情况，而不是这一个）。在您的另一个问题中，建议的解决方案使用循环，因为问题中没有for标记。但是如果你正在使用D3，那么使用这样的循环几乎没有意义。它是为操纵数据而创建的整个库，您忽略了它最重要的方面。

而不是那样，绑定您的数据到选择。在您的情况下，随着您的阵列不断变化，您将需要输入＆＃34;，＆＃34;更新＆＃34;和＆＃34;退出＆＃34;选择。

首先，绑定您的数据：

d3.js

然后，设置选择：

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

这是一个演示如何工作的演示。我有一个数据数组，长度每秒都在变化：

＆＃13;

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

＆＃13;

var svg = d3.select("body").append("svg");

var dataset = [{
    name: "foo"
}, {
    name: "bar"
}, {
    name: "baz"
}, {
    name: "lorem"
}, {
    name: "ipsum"
}, {
    name: "dolot"
}, {
    name: "amet"
}];

print(dataset);

setInterval(()=> {
    var data = dataset.slice(Math.random() * 6);
    print(data);
}, 1000);

function print(data) {

    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) => 20 + i * 16)
        .text((d,i) => "Node " + (i+1) + ", name: " + d.name);

}

＆＃13;

需要另一个帮助才能动态显示屏幕上的文字

2 个答案: