我正在努力实施" Rescale"当我按下按钮时,SVG画布更新轴和圆圈,并显示重新缩放轴的数据。
但是,我一直收到上述错误。删除圆圈没有问题,轴重新缩放。可能是什么问题呢?我的代码如下。
var button = d3.select("body")
.append("input")
.attr("type","button")
.attr("value", "Rescale");
var toggle;
button.on("click", function(){
toggle = !toggle;
xScale_left = d3.scale.linear()
.domain((toggle ? [0,7.5] : [6,7.5]))
.range([0, width / 2]);
xScale_right = d3.scale.linear()
.domain((toggle ? [0,7.5] : [6,7.5]))
.range([width / 2, width]);
xAxis_left = d3.svg.axis()
.scale(xScale_left)
.tickValues((toggle ? [1,6,7] : [6.1,7.1,7.2,7.3,7.4]))
.orient("bottom");
xAxis_right = d3.svg.axis()
.scale(xScale_right)
.tickValues((toggle ? [1,6,7] : [6.1,7.1,7.2,7.3,7.4]))
.orient("bottom");
svg = d3.select("body").transition();
svg.select(".xaxis-left") // change the x axis
.duration(1500).ease("sin-in-out")
.call(xAxis_left);
svg.select(".xaxis-right") // change the x axis
.duration(1500).ease("sin-in-out")
.call(xAxis_right);
svg.selectAll(".nodes").remove();
circles = svg.selectAll(".nodes")
.data(data) // This is where the error occurs
.enter()
.append("g")
.attr("class", "nodes");
circles
.append("circle")
.attr("cx", function(d) {
if (d.qResult === "Apples" || d.qResult === "Kiwis") {
return xScale_right(d.KCComment);
} else {
return xScale_left(d.KCComment);
}
})
.attr("cy", function(d) {
if (d.qResult === "Apples" || d.qResult === "Oranges") {
return yScale_top(d.pscoreResult);
} else {
return yScale_bottom(d.pscoreResult);
}
})
.attr("r", function(d) { return d.r; })
.attr("class", "circle")
.style("fill", function(d){
if(d.qResult == "Apples"){
return "#de2533";
} else if(d.qResult == "Oranges") {
return "#ef7600";
} else if(d.qResult == "Blueberries") {
return "#595194";
} else{
return "#46ad00";
}
});
});