javascript - 与更新/输入的元素交互

Question

我想知道如何在 D3.js 中解决这个问题。下面的代码每 5 秒进入、更新或退出，并显示或消失随机数 name数组 dataset 中的元素。该数组还包含 id元素。现在我想单击屏幕上显示的更新元素，例如 "foo"并希望它是 id (这意味着 1)在我点击 "foo" 后出现元素。函数的名字叫testfunction ，但我认为该功能有些不对劲。问题是，原来的name点击后文本全部消失，新的id文本出现。但我希望在使用 click 后它们都出现在屏幕上功能希望你们中的一些人可以提供帮助。谢谢

  var svg = d3.select("body").append("svg");

  var dataset = [{
  name: "foo", id: "1" 
}, {
  name: "bar",  id: "2"
}, {
  name: "baz", id: "3"
}, ];

        print(dataset);

        setInterval(() => {
          var data = dataset.slice(Math.random() * 6);
          print(data);
        }, 7000);

        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) => "TextNumber" + (i+1) + ", name: " + d.name)
                .on("click", testfunction);

    function testfunction(){

                    textsUpdate
                    .attr("x", 200)
                    .attr("y", function(d, i) { return (490 + i * 28)})
                    .text(function(d, i) { return "IDNumber" + (i+1) + ", Name: "+ d.id})



                    };


        }

Answer 1

如果我正确理解您的问题，这里的问题是您正在更改 textsUpdate 属性，这当然会更改 textsUpdate 的文本位置(它们不但不会消失)。

解决方案是创建另一个文本元素:

var svg = d3.select("body").append("svg");

var dataset = [{
  name: "foo",
  id: "1"
}, {
  name: "bar",
  id: "2"
}, {
  name: "baz",
  id: "3"
}, ];

var testText = svg.append("text")
    .attr("x", 100)
    .attr("y", 100);

print(dataset);

setInterval(() => {
  var data = dataset.slice(Math.random() * 6);
  print(data);
}, 7000);

function print(data) {

   testText.text("");

  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)
    .attr("cursor", "pointer")
    .text((d, i) => "TextNumber" + (i + 1) + ", name: " + d.name)
    .on("click", function(d, i) {
      testfunction(d, i);
    });

  function testfunction(data, index) {

    testText.text(function() {
        return "IDNumber" + (index + 1) + ", Name: " + data.id
      })

  };

}

<script src="https://d3js.org/d3.v4.js"></script>