[英]D3 Zoom behavior
i'm trying to use Zoom behavior for my scatter plot graph. 我正在尝试对散点图使用“缩放”行为。 I have research around online and this is the most simple method that i could implement for my graph.
我在网上进行了研究,这是我可以为图形实现的最简单方法。 But i am having some problems with my codes.
但是我的代码有一些问题。 It's only when i added
只有当我添加
var zoom = d3.behavior.zoom()
.scaleExtent([1, 10])
.on("zoom", zoomed); #this line
Then my whole graph will just disappear Any reasons why? 然后我的整个图表就会消失了。为什么? I am very very new to d3... thanks for help in advance!
我对d3非常陌生...预先感谢您的帮助! :)
:)
var margin = {top: 30, right: 20, bottom: 30, left: 50},
width = 1100 - margin.left - margin.right,
height = 600 - margin.top - margin.bottom;
var zoom = d3.behavior.zoom()
.scaleExtent([1, 10])
.on("zoom", zoomed); #This line
var parseDate = d3.time.format("%Y-%m-%dT%H:%M:%S").parse;
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(5);
var valueline = d3.svg.line()
.x(function(d) { return x(d.startDateTime); })
.y(function(d) { return y(d.Ranking); });
var svg = d3.select(".graph")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
function make_y_axis() {
return d3.svg.axis()
.scale(y)
.orient("left")
.ticks(4)
}
function make_x_axis() {
return d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(4)
}
d3.csv("FinalCSVFile.csv", function(error, data) {
data.forEach(function(d) {
d.startDateTime = parseDate(d.startDateTime);
d.Ranking = +d.Ranking;
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.startDateTime; }));
y.domain([0, d3.max(data, function(d) { return d.Ranking; })]);
// Add the X Axis
svg.append("g")
.transition()
.duration(300)
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append('g')
.transition()
.duration(300)
.attr('class', 'grid')
.attr('transform', 'translate(0,' + height + ")")
.call(make_x_axis()
.tickSize(-height, 0, 0)
.tickFormat("")
)
svg.append('g')
.transition()
.duration(300)
.attr("class", "grid")
.call(make_y_axis()
.tickSize(-width, 0, 0)
.tickFormat("")
)
svg.selectAll(".dot")
.data(data)
.enter().append("circle")
.attr("class", "dot")
.attr("r", 5)
.attr("cx", function(d) { return x(d.startDateTime);})
.attr("cy", function(d) { return y(d.Ranking * 3); })
}); });
zoomed
is not defined. 未定义
zoomed
。 Your code is probably throwing an error at that line and then not executing anything that follows. 您的代码可能会在该行引发错误,然后不执行随后的任何操作。
zoomed
would need to be defined as a function that describes what should happen when someone zooms on the graph, and would need to be defined before zoom
. zoomed
将需要定义为一个函数,该函数描述某人放大图形时应该发生的情况,并且需要在zoom
之前进行定义。 Or you can take out that line. 或者,您可以删除该行。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.