我正在根据以下示例创建一个可缩放的散点图:
What Career Should I Invest In?
我添加了一个按钮,用于将x轴的类别从卡路里更改为碳水化合物,并且图表已正确更新。但是当我尝试使用新域缩放时,缩放使用旧域。如何更新新域的缩放功能?
可以找到当前的实施here。
答案 0 :(得分:1)
您只需要将新比例重新绑定到行为。
首先将变焦行为功能放在变量中,以便以后可以访问它: 你原来的代码......
var svg = d3.select("#scatter")
.append("svg")
.attr("width", outerWidth)
.attr("height", outerHeight)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.call(d3.behavior.zoom().x(x).y(y).scaleExtent([0, 500]).on("zoom", zoom));
应该是这样的:
var zoomBeh = d3.behavior.zoom()
.x(x)
.y(y)
.scaleExtent([0, 500])
.on("zoom", zoom);
var svg = d3.select("#scatter")
.append("svg")
.attr("width", outerWidth)
.attr("height", outerHeight)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.call(zoomBeh);
其次,在功能更改中,将比例与行为绑定。所以而不是:
function change() {
xCat = "Carbs";
xMax = d3.max(data, function(d) { return d[xCat]; });
xMin = d3.min(data, function(d) { return d[xCat]; });
x.domain([xMin, xMax]);
var svg = d3.select("#scatter").transition();
svg.select(".x.axis").duration(750).call(xAxis).select(".label").text(xCat);
objects.selectAll(".dot").transition().duration(1000).attr("transform", transform);
}
你只需更改一行:
function change() {
xCat = "Carbs";
xMax = d3.max(data, function(d) { return d[xCat]; });
xMin = d3.min(data, function(d) { return d[xCat]; });
// x.domain([xMin, xMax]);
zoomBeh.x(x.domain([xMin, xMax])).y(y.domain([yMin, yMax]));
var svg = d3.select("#scatter").transition();
svg.select(".x.axis").duration(750).call(xAxis).select(".label").text(xCat);
objects.selectAll(".dot").transition().duration(1000).attr("transform", transform);
}