与更新/输入元素的互动

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的文本位置（他们不这样做消失，虽然）的这将。

一种解决方案创造另一文本元素：

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>