-1
D3.js (this post 기준)를 사용하여 극좌표 산점도를 만들었습니다.줌/팬 D3.js 극지 산란 플롯
확대/축소 및 이동 기능을 추가하고 싶습니다. 직사각형 플롯에 대한 예는 보았지만 원형 플롯에서는 확대/축소/패닝에 대한 예제가 없습니다.
저는 약간의 실수로 D3을 사용하는 초보자입니다. 누구든지 도움을 줄 수 있습니까/제안을 제공 할 수 있습니까?
D3.js (this post 기준)를 사용하여 극좌표 산점도를 만들었습니다.줌/팬 D3.js 극지 산란 플롯
확대/축소 및 이동 기능을 추가하고 싶습니다. 직사각형 플롯에 대한 예는 보았지만 원형 플롯에서는 확대/축소/패닝에 대한 예제가 없습니다.
저는 약간의 실수로 D3을 사용하는 초보자입니다. 누구든지 도움을 줄 수 있습니까/제안을 제공 할 수 있습니까?
나는 당신의 목표가 무엇인지 모르겠지만, 아래에서 시도했습니다.
먼저 확대/축소 동작을 추가해야합니다. 내가 좋아하는 당신의 x와 y 방향 모두에 대한 R 스케일 사용 :
var zoomBeh = d3.behavior.zoom()
.x(r)
.y(r)
.on("zoom", zoom);
을 그리고 당신의 SVG로 줌 동작을 호출
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width/2 + "," + height/2 + ")")
.call(zoomBeh);
마지막으로 당신은 줌 기능을해야합니다.
function zoom() {
var t = svg.transition().duration(750);
svg.selectAll(".point").transition(t)
.attr("transform", function(d) {
var coors = line([d]).slice(1).slice(0, -1);
return "translate(" + coors + ")"
})
}
여기에 업데이트 된 fiddle이 있습니다. 그것은 조금 비틀 거리고, 나는 왜 아직 확실하지 않다.
예를 들어 바이올린을 사용하여 지금까지 달성 한 바를 표시 할 수 있습니까? – 3TW3
확실 : https://jsfiddle.net/8opgjz45/1/ – Steph2a1
좋아, 대답을 추가했지만, 내가 무엇을 목표로하는지 완전히 확신하지 못했습니다. – 3TW3