Warum wird die D3.js-Übergangsfunktion unterbrochen, wenn ich versuche, sie das zweite Mal zu verwenden?

Ich versuche zu verblassen und verschieben Sie ein HTML-Div in ein SVG-Kreis-Element, während das gleiche Svg-Kreis-Element eingeblendet wird, um anzuzeigen. Warum habe ich folgende Probleme?Warum wird die D3.js-Übergangsfunktion unterbrochen, wenn ich versuche, sie das zweite Mal zu verwenden?

Die Probleme, die ich konfrontiert sind:

svg Kreis-Elemente nicht
in nicht verblassen, wenn ich versuche Übergang zweites Mal für DIV-Element zu verwenden, um es nicht
Auch funktioniert, Cancelling Übergang von d3.select(textbox).transition() funktioniert nicht

Meine aktuelle Setup ist:

Chrome Version 51.0.2704.36 beta-m (64-bit)
src = "https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.3/ace.js"
src = "https://d3js.org/d3.v3.min.js"

Mein Code ist:

c=d3.select(document.body).append("svg") 
.append("circle") 

c 
.attr("r","20") 
.attr("cx","50") 
.attr("cy","50") 
.attr("fill","red") 
.attr("stroke","black") 
.attr("opacity","0") 
.transition() 
.duration(200) 
.attr("opacity","1"); 



d3.select(testbox) 
.transition() 
.style("left",c.attr("cx")) 
.style("top",c.attr("cy")) 
.style("opacity","0") 
.duration(200);

Quelle

2016-05-13 Gediz GÜRSU

Set position Eigenschaft div als absolute.

Hier ist das Arbeitscode-Snippet.

var c = d3.select(document.body).append("svg") 
 
    .append("circle") 
 

 
c.attr("r", "20") 
 
    .attr("cx", "50") 
 
    .attr("cy", "50") 
 
    .attr("fill", "red") 
 
    .attr("stroke", "black") 
 
    .attr("opacity", "0") 
 
    .transition() 
 
    .duration(1000) 
 
    .attr("opacity", "1"); 
 

 
var testbox = d3.select("#testbox"); 
 

 
d3.select(testbox.node()) 
 
    .style("position", "absolute") 
 
    .transition() 
 
    .style("left", c.attr("cx") + "px") 
 
    .style("top", c.attr("cy") + "px") 
 
    .style("opacity", "0") 
 
    .duration(1000);

div { 
 
    background: green; 
 
    width: 55px; 
 
    height: 20px; 
 
    left: 0px; 
 
    top: 0px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 

 
<body> 
 
    <div id="testbox"></div> 
 
</body>

Quelle

2016-05-13 10:31:27 Gilsha

I Chrom nicht Beta-Version heruntergeladen haben. Dein Code funktioniert auch und meins auch. Beta-Version hat auch SetInterval() und SetTimer() Probleme. Ich weiß nicht warum. PS: Mein +1 wird nicht angezeigt, weil ich noch nicht genug Punkte gesammelt habe. Vielen Dank für Ihr Feedback. –

Warum wird die D3.js-Übergangsfunktion unterbrochen, wenn ich versuche, sie das zweite Mal zu verwenden?

Antwort

Verwandte Themen