[英]d3 transition: update axis and data just once
我想通過單選按鈕更新散點圖及其軸,如以下示例所示: https : //bl.ocks.org/mbostock/3903818
我的問題:散點圖僅更新一次,該函數的第二次調用對標記或軸沒有影響。
另外,該軸在第一次調用后得到了更新,但是在可見窗口之外仍然有一些標記不是預定的。 我不知道為什么軸沒有“完全”縮放。
軸的一些定義:
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);
});
}
我可以解決兩個問題:
剛剛刪除了我的過渡函數的“創建新”部分,並在兩個if語句中拆分了域的重新縮放。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.