Question

我想知道如何在D3.js中解决这个问题。下面的代码每5秒输入，更新或退出一次，并显示或消失属于数组name的随机数dataset个元素。该数组还包含id个元素。现在，我想点击屏幕上显示的更新元素，例如"foo"，并希望在我点击id元素后显示"foo"（表示1）。该函数的名称称为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的文字位置（他们不会＆＃但是，t 消失了。

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

＆＃13;

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

＆＃13;

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

＆＃13;

与更新/输入的元素交互

1 个答案: