D3 전환 : 업데이트 축과 데이터 번만

Question

예와 같이 내 산점도 라디오 버튼을 통해 축선을 갱신하고자

: https://bl.ocks.org/mbostock/3903818

내 문제 : 산점도는 한번만의 두 번째 전화를 업데이트 이 기능은 마커 또는 축에 영향을 미치지 않습니다.

또한 축은 첫 번째 호출 후에 updatet을 가져 왔지만 intendet이 아닌 보이는 창 밖으로 여전히 마커가 있습니다. 왜 축이 "완전하게"스케일링되지 않는지 나는 모른다.

축에 대한 몇 가지 정의 :

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"); 

기능은 렌더링 내 :

그냥 내 전환의 "새로 만들기"부분을 삭제 :

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

나는이 두 가지 문제를 해결할 수 -function을 사용하고 두 if 문 내부에서 도메인의 재배 열을 분할합니다.