<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>d3</title>
</head>
<body>
<div class="test">
</div>
<script src="../js/jquery-2.1.4.js"></script>
<script src="../js/d3.js"></script>
<script>
$(function(){
var zoom = d3.behavior.zoom()
// css3 scale 属性
// .scale(5)
// .translate 也是类似的
// .center([20, 20]) // 鼠标滚轮缩放的焦点。
// .size([900, 400]) // 不知道
.scaleExtent([1, 10])
// .duration(10000)
.on(‘zoom‘, zoomed)
// .event(‘svg‘) // 不知道
;
function zoomed(d) {
// debugger
console.log(‘zoomed:‘+d3.event.translate+"; "+d3.event.scale);
d3.select(this).attr("transform", "translate("+d3.event.translate+")scale("+d3.event.scale+")");
// d3.select(this).attr("transform", "translate("+d3.event.translate+")");
// d3.select(this).attr("transform", "scale("+d3.event.scale+")");
// zoom.scale(2);
}
var svg = d3.select(‘.test‘)
.selectAll(‘svg‘)
.data([{
x: 120,
y: 62
}])
.enter()
.append(‘svg‘)
.attr(‘width‘, 240)
.attr(‘height‘, 125)
;
// zoom.center([0, 0]);
svg.append(‘circle‘)
.attr({
r: 20,
cx: function(d) {
return d.x;
},
cy: function(d){
return d.y
}
})
.call(zoom);
;
})
</script>
</body>
</html>
常用的看明白了，还有几个地方不太明白。
写过的zoom函数
.on("zoom", function(){
that.svg_obj.select(".x.axis").call(xAxis);
var _lines = that.lines;
for(var i=0; i<_lines.length; i++){
that.svg_obj.select(".g"+i+" path.line")
.attr("d", lineFunction(_lines[i].dataset))
;
that.svg_obj.select(".g"+i+" path.area")
.attr("d", areaFunction(_lines[i].dataset))
;
that.svg_obj.selectAll(".g"+i+" circle").attr("d", function(){
that.svg_obj.selectAll(".g"+i+" circle").attr(‘cx‘, function(d,i){
return xScale(i);
})
.attr(‘cy‘, function(d){
return yScale(d);
})
;
});
}
});
时间： 2024-12-21 18:07:38