Question

基于这个问题：Need another help to show up text on the screen dynamically

可以在D3.js中动态输入，更新和退出元素。在下面的代码中，可以使用文本。

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

}

现在，我尝试用圆圈做同样的事情并且工作正常。然后我试图用矩形做这个，它没有用。这是矩形示例的代码：

 var rect= svg.selectAll(".rect") 
             .data(path1);

            rectExit = rect.exit().remove();

            rectEnter = rect.enter()
            .append("rect")
            .attr("class", "rect");

            rectUpdate = rect.merge(rectEnter)
            .attr("x", function(d, i) { return (10 + i * 2)})
            .attr("y", 12)
            .attr("width", 10)
            .attr("height", 40)
            .attr('stroke', "blue")

有人可以帮助我吗？感谢

输入，更新，退出矩形？

0 个答案: