Я хочу добавить косинус мыши к моему солнечному лучу:
Что я сделал, я отредактировал этот фрагмент кода:
var zoom = d3.behavior.zoom()
.scaleExtent([1, 10])
.on("zoom", zoomed);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width/2 + "," + height * .52 + ")")
.call(zoom);
function zoomed() {
svg.attr('transform', 'translate(' + d3.event.transform.x + ',' + d3.event.transform.y + ') scale(' + d3.event.scale + ')');
//svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}
Проблема в том, что когда страница загружается, все выглядит нормально, однако, когда колесико используется для прокрутки солнечного луча, оно заканчивается в верхнем левом углу:
Я смог исправить это, изменив этот код:
function zoomed() {
svg.attr("transform", "translate(" + width/2 + "," + height * .52 + ")scale(" + d3.event.scale + ")");
}
Солнце сейчас остается посередине, однако это не будет приближаться к месту курсора и не позволит пользователю еще больше уменьшить масштаб.
Любые предложения о том, как я могу приблизить курсор к месту курсора (как в первом примере кода) без сужения солнечного света в верхнем левом углу?
Полный код см. В JSfiddle, он не работает здесь, однако его работа локально работает.
d3.event.translate
возвращает массив. Таким образом, если вы хотите добавить эти значения (width/2
и height/2
), вы должны добавить их отдельно:
function zoomed() {
svg.attr('transform', 'translate(' + (d3.event.translate[0] + width / 2) +
',' + (d3.event.translate[1] + height / 2) + ') scale(' + d3.event.scale + ')');
}
Кроме того, если вы хотите использовать свою оригинальную функцию масштабирования...
function zoomed() {
svg.attr("transform", "translate(" + d3.event.translate +
")scale(" + d3.event.scale + ")");
}
... просто отмените выбор svg, назначив другое имя для группы:
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var foo = svg.append("g")
.attr("transform", "translate(" + width / 2 + "," + height * .52 + ")")
.call(zoom);
Я использовал стандартный d3.event.translate и d3.event.scale в функции Zoomed, например:
function zoomed() {
svg.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")");
}
Все работало нормально, за исключением того, что весь солнечный заряд прыгнул в верхний левый угол, когда я впервые прокрутил. Он исправил себя после того, как я перетащил его обратно в середину, но это было неприятно.
Я боролся с этим часами. В конце концов я решил это, изменив атрибут viewBox на svg:
.attr({viewBox: "" + (-width / 2) + " " + (-height / 2) + " " + width + " " + height})
Я получил идею из этого примера: Basic Sunburst