与 updated/entered 元素互动

Question

我想知道如何在 D3.js 中解决这个问题。下面的代码每 5 秒进入、更新或退出一次，并显示或消失数组 dataset 中随机数量的 name 个元素。该数组还包含 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 的文本位置（它们不会消失, though).

一个解决方案正在创建另一个文本元素：

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>

与 updated/entered 元素互动

Interaction with updated/entered elements

javascript

jquery

svg

enter

d3.js