在平移和缩放图表时,是否有人能指出如何相应地缩放线图上的所有圆圈?我可以使用d3.event.scale
来调整圈子的大小并计算新的cx
和cy
吗?
function zoomed() {
console.log(d3.event.translate);
console.log(d3.event.scale);
svg.select(".x.axis").call(xAxis);
svg.select(".y.axis").call(yAxis);
svg.select(".x.grid")
.call(make_x_axis()
.tickSize(-height, 0, 0)
.tickFormat(""));
svg.select(".y.grid")
.call(make_y_axis()
.tickSize(-width, 0, 0)
.tickFormat(""));
svg.select(".line")
.attr("class", "line")
.attr("d", line);
svg.selectAll("circle").attr("cy",function(){
??
}
.attr("cx",function(){
}
}
这里是完整的代码:
function line_chart(field,el){
margin = {
top: 20,
right: 20,
bottom: 20,
left: 45
};
tickno = 8;
width = 960 - margin.left - margin.right;
height = 400 - margin.top - margin.bottom;
var x = d3.scale.linear().domain(d3.extent(data, function (d) {
return d.item;
}))
.range([0, width]);
var ymax = d3.max(data,function(d){
return (parseInt(d[field])+1);
});
var ymin = d3.min(data,function(d){
return d[field];
});
var xmax = d3.max(data,function(d){
return d.name;
});
var y = d3.scale.linear()
.domain([ymin,ymax])
.range([height, 0]);
var line = d3.svg.line()
.x(function (d) {
return x(d.item);
})
.y(function (d) {
return y(d[field]);
});
var zoom = d3.behavior.zoom()
.x(x)
.scaleExtent([-1, 2])
.y(y)
.on("zoom", zoomed);
svg = d3.select(el)
.append("svg:svg")
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append("svg:g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.call(zoom);
svg.append("svg:rect")
.attr("width", width)
.attr("height", height)
.attr("class", "plot");
var make_x_axis = function () {
return d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(tickno);
};
var make_y_axis = function () {
return d3.svg.axis()
.scale(y)
.orient("left")
.ticks(tickno);
};
svg.selectAll("dot").data(data).enter().append("circle").attr("r",3.5)
.attr("cx",function(d){return x(d.item);})
.attr("cy",function(d){return y(d[field]);})
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(tickno);
svg.append("svg:g")
.attr("class", "x axis")
.attr("transform", "translate(0, " + height + ")")
.call(xAxis);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(tickno);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
svg.append("g")
.attr("class", "x grid")
.attr("transform", "translate(0," + height + ")")
.call(make_x_axis()
.tickSize(-height, 0, 0)
.tickFormat(""));
svg.append("g")
.attr("class", "y grid")
.call(make_y_axis()
.tickSize(-width, 0, 0)
.tickFormat(""));
var clip = svg.append("svg:clipPath")
.attr("id", "clip")
.append("svg:rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", width)
.attr("height", height);
var chartBody = svg.append("g")
.attr("clip-path", "url(#clip)");
chartBody.append("svg:path")
.datum(data)
.attr("class", "line")
.attr("d", line);
function zoomed() {
console.log(d3.event.translate);
console.log(d3.event.scale);
svg.select(".x.axis").call(xAxis);
svg.select(".y.axis").call(yAxis);
svg.select(".x.grid")
.call(make_x_axis()
.tickSize(-height, 0, 0)
.tickFormat(""));
svg.select(".y.grid")
.call(make_y_axis()
.tickSize(-width, 0, 0)
.tickFormat(""));
svg.select(".line")
.attr("class", "line")
.attr("d", line);
svg.select("circle").attr("cy",function
}
}
line_chart('diameter','#area')
答案 0 :(得分:1)
首先,包裹你的"点"在g
:
svg.append('g')
.attr('class','dots')
.selectAll(".dot")
.data(data)
.enter()
...
然后,在缩放中转换g
:
svg.select(".dots")
.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
要调整半径,请将基准半径乘以比例:
svg.selectAll(".dots circle").attr("r", function(){
return (3.5 * d3.event.scale);
});
更新了小提琴here。