縮放和平移 - 將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

回答

相關問題