Interaktion mit aktualisierten/eingegebenen Elementen

Question

Ich frage mich, wie man dieses Problem in D3.js löst. Dieser unten stehende Code wird alle 5 Sekunden eingegeben, aktualisiert oder beendet und zeigt eine zufällige Anzahl von name Elementen an, die Teil des Arrays dataset sind. Dieses Array enthält auch id Elemente. Jetzt möchte ich auf ein aktualisiertes Element klicken, das auf dem Bildschirm erscheint, zum Beispiel "foo" und wollen, dass es id (das heißt 1) erscheint, nachdem ich dieses "foo" Element geklickt habe. Der Name der Funktion heißt testfunction, aber ich denke, etwas stimmt nicht mit dieser Funktion. Das Problem ist, dass die ursprünglichen name Texte nach dem Klick verschwinden und der neue id Text erscheint. Aber ich möchte sie beide auf dem Bildschirm nach der Verwendung der click Funktion Hope einige von euch können helfen. Dank

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

Wenn ich dein Problem richtig verstanden habe, hier das Problem ist, dass Sie Ihre textsUpdate Attribute sind zu ändern, das wird sich natürlich ändern textsUpdate ‚s Textpositionen (sie es nicht tun verschwinden, obwohl).

Eine Lösung andere Textelement zu schaffen:

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>