與更新/輸入元素的互動

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>