d3.js панорамирование и масштабирование при использовании мыши после программного масштабирования

Я пытаюсь центрировать мой график d3, когда он загружается. Поэтому я бегуd3.js панорамирование и масштабирование при использовании мыши после программного масштабирования

var g = svg.append("g"); 

//... then later 

g.call(zoom.transform, center);

Это не центрирование, это просто масштабирование прямо сейчас. Но масштаб работает. Проблема в том, что когда я затем прокручиваю, чтобы увеличить или уменьшить масштаб, она начинается с 1 вместо 0.5. Так что он прыгает.

Это мой jsbin.

источник

2016-07-26 Tyler Graf

Вы применяете свое мероприятие на другом объекте (g), затем настройте масштаб (svg). Поскольку событие масштабирования ссылается на элемент, к которому он применяется, d3 теперь не относится к вашему начальному центрированию. Из docs:

Поведение зума сохраняет состояние масштабирования на элемент, к которому был применен поведение зум, а не на само поведение масштабирования. Это , потому что поведение масштабирования может применяться ко многим элементам одновременно, и каждый элемент можно масштабировать независимо. Состояние масштабирования может изменяться либо при взаимодействии пользователя, либо программно с помощью zoom.transform.

Изменение вашего звонка на svg.call(zoom.transform, center); устраняет вашу проблему.

Полный код:

var svg = d3.select("svg"), 
 
    width = +svg.attr("width"), 
 
    height = +svg.attr("height"), 
 
    transform = d3.zoomIdentity; 
 

 
var points = d3.range(2000).map(phyllotaxis(10)); 
 

 
var zoom = d3.zoom() 
 
    .scaleExtent([1/2, 8]) 
 
    .on("zoom", zoomed); 
 

 
var g = svg.append("g"); 
 

 
g.selectAll("circle") 
 
    .data(points) 
 
    .enter().append("circle") 
 
    .attr("cx", function(d) { return d.x; }) 
 
    .attr("cy", function(d) { return d.y; }) 
 
    .attr("r", 2.5) 
 
    .call(d3.drag() 
 
     .on("drag", dragged)); 
 

 
svg.call(zoom); 
 

 
function zoomed() { 
 
    g.attr("transform", d3.event.transform); 
 
} 
 

 
function center() { 
 
    return d3.zoomIdentity 
 
     .scale(0.5); 
 
} 
 

 
function dragged(d) { 
 
    d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y); 
 
} 
 

 
function phyllotaxis(radius) { 
 
    var theta = Math.PI * (3 - Math.sqrt(5)); 
 
    return function(i) { 
 
    var r = radius * Math.sqrt(i), a = theta * i; 
 
    return { 
 
     x: width/2 + r * Math.cos(a), 
 
     y: height/2 + r * Math.sin(a) 
 
    }; 
 
    }; 
 
} 
 

 
svg.call(zoom.transform, center);

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<svg width="960" height="500"></svg> 
 
<script src="https://d3js.org/d3.v4.min.js"></script> 
 
</body> 
 
</html>

источник

2016-07-27 00:21:18 Mark

Спасибо, спасибо! –

d3.js панорамирование и масштабирование при использовании мыши после программного масштабирования

ответ

Смежные вопросы