d3 Übergang: update Achse und Daten nur einmal

Question

Ich mag meine Scatterplot und seine Achse über Optionsfeld aktualisieren, wie in diesem Beispiel gezeigt: https://bl.ocks.org/mbostock/3903818

mein Problem: die Scatterplot aktualisieren nur einmal, um den zweiten Anruf von Die Funktion hat keine Auswirkungen auf Marker oder Achsen.

Zusätzlich wurde die Achse nach dem ersten Aufruf aktualisiert, aber es gibt immer noch Markierungen aus dem sichtbaren Fenster, die nicht intendet sind. Ich weiß nicht, warum die Achse nicht "vollständig" skaliert.

Einige Definitionen für die Achse:

var xValue_tsne = function(d) { return d.X_tsne;}; 
var xMap_tsne = function(d) { return xScale(xValue_tsne(d));}; 
var xValue_pca = function(d) { return d.X_pca;}; 
var xMap_pca = function(d) { return xScale(xValue_pca(d));}; 
var xScale = d3.scale.linear().range([0, width]); 
var xAxis = d3.svg.axis().scale(xScale).orient("bottom"); 

var yValue_tsne = function(d) { return d.Y_tsne}; 
var yMap_tsne = function(d) { return yScale(yValue_tsne(d));}; 
var yValue_pca = function(d) { return d.Y_pca}; 
var yMap_pca = function(d) { return yScale(yValue_pca(d));}; 
var yScale = d3.scale.linear().range([height, 0]); 
var yAxis = d3.svg.axis().scale(yScale).orient("left"); 

Mein Render-Funktion:

einfach löschte die "Neue" Teil meines Übergangs:

function render (data) { 

function transition(dimension) { 
    if (dimension == "pca") { 
     var x = xMap_pca; 
     var y = yMap_pca; 
    } 
    else if (dimension == "tsne") { 
     var x = xMap_tsne; 
     var y = yMap_tsne; 
    } 

    console.log(x); 
    console.log(y); 

    // Update old 
    circles.attr("class", "update") 
     .transition() 
      .duration(0) 
      .attr("cx", x) 
      .attr("cy", y); 

    // Create new 
    circles.enter().append("circle") 
     .transition() 
      .duration(0) 
      .attr("cx", x) 
      .attr("cy", y); 

    //Rescale Domains 
    xScale.domain([d3.min(data, xValue_pca)-1, d3.max(data, xValue_pca)+1]); 
    yScale.domain([d3.min(data, yValue_pca)-1, d3.max(data, yValue_pca)+1]); 

    //Update Axis 
    holder.select(".xaxis") 
     .transition() 
      .duration(0) 
     .call(xAxis); 
    holder.select(".yaxis") 
     .transition() 
      .duration(0) 
     .call(yAxis); 

} 


//Initial scale of ranges 
xScale.domain([d3.min(data, xValue_tsne)-1, d3.max(data, xValue_tsne)+1]); 
yScale.domain([d3.min(data, yValue_tsne)-1, d3.max(data, yValue_tsne)+1]); 



//X Axis 
holder.append("g") 
    .attr("class", "xaxis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(xAxis) 
.append("text") 
    .attr("x", width) 
    .attr("y", -achse_beschriftung) 
    .style("text-anchor", "end") 
    .text("X"); 



//Y Axis 
holder.append("g") 
    .attr("class", "yaxis") 
    .call(yAxis) 
.append("text") 
    .attr("transform", "rotate(-90)") 
    .attr("y", achse_beschriftung) 
    .attr("dy", 8) 
    .style("text-anchor", "end") 
    .text("Y"); 



//draw dots 
var circles = holder.selectAll("dot") 
    .data(data); 



// Create initial elements 
circles.enter().append("circle") 
    .attr("class", "dot") 
    .attr("r", rMin) 
    .attr("cx", xMap_tsne) 
    .attr("cy", yMap_tsne) 
    .style("fill", "#660066"); 


// EXIT 
circles.exit() 
    .attr("class", "exit") 
    .transition() 
     .duration(0) 
      .remove(); 


//Event Handler für Radiobox 
d3.select("#pca").on("change", function() { 
    transition(document.getElementById("pca").value); 
}); 



//Event Handler für Radiobox 
d3.select("#tsne").on("change", function() { 
    transition(document.getElementById("tsne").value); 
}); 

} 

Answer 1

ich die beiden Probleme lösen könnte -Funktion und teilen Sie die Neuskalierung der Domäne innerhalb der beiden if-Anweisungen.