缩放和平移 - 将d3代码升级到d3.v4

我一直在尝试将此代码升级到d3的v4，但没有运气。缩放和平移 - 将d3代码升级到d3.v4

function xnr(selector) { 
var coordinates = [ 
         {"id": 1, "x": 120.16353869437225, "y": 160.974180892502466}, 
      {"id": 2, "x": 190.285414932883366, "y": 259.116836781737214}, 
      {"id": 3, "x": 310.218762385111142, "y": 170.033297729284202} 
      ]; 

var x = d3.scale.linear() 
    .domain([0, 100]) 
    .range([0, 100]); 

var y = d3.scale.linear() 
    .domain([0, 100]) 
    .range([0, 100]); 

var xAxis = d3.svg.axis() 
     .scale(x) 
     .orient("bottom"); 

var yAxis = d3.svg.axis() 
     .scale(y) 
     .orient("left"); 

var svg = d3.select(selector).append("svg:svg") 
    .attr("width", 400) 
    .attr("height", 400) 
    .call(d3.behavior.zoom().x(x).y(y).scaleExtent([1, 100]).on("zoom", zoom)); 

var groups = svg.selectAll("g.leaf") 
    .data(coordinates) 
    .enter() 
    .append("svg:g") 
    .attr("class", "leaf") 
    .attr("transform", transform) 
    .append("svg:circle") 
    .attr("r", 5) 
    .attr('stroke', '#aaaaaa') 
    .attr('stroke-width', '2px'); 

function zoom() { 
    svg.selectAll("g.leaf").attr("transform", transform); 
} 

function transform(d) { 
    return "translate(" + x(d.x) + "," + y(d.y) + ")"; 
} 
}

旧代码jsfiddle - 按我需要的（语义缩放）工作。新代码jsfiddle - 只能用作几何缩放。

迈克·博斯托克的SVG几何和语义缩放的例子在d3 v3中为我工作，但由于zoom.x（）和zoom.y（）函数已被删除，所以我迷了路。

来源

2017-06-01 Victor40011

它看起来像两个版本都有语义缩放工作 – Dekel

hmmm，在我的浏览器中，与第二个jsfiddle，放大时点变得更大 – Victor40011

我正在使用chrome并且它们保持其大小。你究竟如何缩放？ – Dekel

Mike Bostock的Pan & Zoom III示例可以修改为使用按照此jsfiddle的语义缩放。重要的位是：

var radius = 3; 
var circles = g.selectAll("circle") 
    .data(points) 
    .enter().append("circle") 
    .attr("cx", function(d) { return d[0]; }) 
    .attr("cy", function(d) { return d[1]; }) 
    .attr("r", radius); 

svg.append("rect") 
    .attr("width", width) 
    .attr("height", height) 
    .style("fill", "none") 
    .style("pointer-events", "all") 
    .call(d3.zoom() 
     .scaleExtent([1/2, 4]) 
     .on("zoom", zoomed)); 

function zoomed() { 
    var transform = d3.zoomTransform(this); 
    circles.attr("transform", transform); 
    circles.attr("r", radius/transform.k) 
}

zoomTransform是这增加了面积，因为其增加的距离的平面的线性变换。如果我们希望缩放后的圆具有相同的面积，我们需要按照转换的比例因子（transform.k）重新缩放它们的半径。

来源

2017-07-26 19:07:12 Russ

缩放和平移 - 将d3代码升级到d3.v4

回答

相关问题