d3.behavior.zoom () перемещает график в угол вместо центра

1

Я хочу добавить косинус мыши к моему солнечному лучу:
Что я сделал, я отредактировал этот фрагмент кода: 

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 + ")");
}

Проблема в том, что когда страница загружается, все выглядит нормально, однако, когда колесико используется для прокрутки солнечного луча, оно заканчивается в верхнем левом углу:
Изображение 174551

Я смог исправить это, изменив этот код:

function zoomed() {
  svg.attr("transform", "translate(" + width/2 + "," + height * .52 + ")scale(" + d3.event.scale + ")");
}

Солнце сейчас остается посередине, однако это не будет приближаться к месту курсора и не позволит пользователю еще больше уменьшить масштаб.
Любые предложения о том, как я могу приблизить курсор к месту курсора (как в первом примере кода) без сужения солнечного света в верхнем левом углу?

Полный код см. В JSfiddle, он не работает здесь, однако его работа локально работает.

Теги:
d3.js
graph
sunburst-diagram

2 ответа

1
Лучший ответ

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);
Поделиться
  • 0
    Я попытался заменить функцию "масштабирования" на предоставленную вами, однако дальнейшее уменьшение по-прежнему невозможно?
  • 0
    Это другая проблема. Я обращаюсь только к проблеме центрирования здесь. Пожалуйста, держите это одна проблема на вопрос.
Показать ещё 2 комментария
0

Я использовал стандартный 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

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню