Question

我想通过单选按钮更新我的散点图及其轴，如下例所示：https://bl.ocks.org/mbostock/3903818

我的问题：散点图只更新一次，函数的第二次调用对标记或轴没有影响。

此外，轴在第一次调用后得到updatet，但是仍有可见窗口外的标记，而不是意图。我不知道为什么轴没有“完全”缩放。

轴的一些定义：

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

我可以解决这两个问题：

刚刚删除了我的transition-function的“Create new”部分，并在两个if语句中拆分了域的重新缩放。

d3过渡：仅更新轴和数据一次

1 个答案: