如何在 D3.js 中相应地缩放和平移折线图上的散点图

Question

谁能指出正确的方向，说明在平移和缩放图表时如何相应地缩放折线图上的所有圆圈？我可以使用 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')

Answer 1

首先，将您的 "dots" 包装在 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);
});

已更新 fiddle here。

如何在 D3.js 中相应地缩放和平移折线图上的散点图

how to make scatterplot on a line chart zooming and panning correspondingly in D3.js

javascript

svg

d3.js