d3: изображение svg в упаковке круга масштабирования

ОБНОВЛЕНИЕ: Новый JSFIDDLE Масштабирование теперь работает, отказались от defs и rect и просто добавили изображение. Но все равно застрял на переводе.

Перевод по-прежнему не работает в зуме. Я могу установить перевод на -100 для x и y, чтобы получить правильное размещение без увеличения. Но при масштабировании он, конечно, по-прежнему переводит его на -100, а не на большее значение, которое должно быть, чтобы оно оставалось на месте.

Кажется, что-то нужно в коде в разделе масштабирования внизу. Возился с частью, которая в настоящее время закомментирована, но пока не повезло.

        // .attr("transform", function(d) { return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")"; })
        // .attr("x", function(d) { return d.r * k; })
        // .attr("y", function(d) { return d.r * k; })
        .attr("width", function(d) { return d.r * k; })
        .attr("height", function(d) { return d.r * k; })

Вот JSFIDDLE. У меня есть упаковка круга d3 с растровым изображением внутри прямоугольника svg внутри каждого узла. Как вы делаете масштаб изображения при увеличении? Контейнер масштабируется, но изображение остается маленьким и повторяется при изменении масштаба. Пытался правильно настроить деф, но безрезультатно.

    var defs = svg.append("defs")
    // .data(nodes)
    // .enter()
    .append("pattern")
    .attr("id", "bg")
    .attr('patternUnits', 'userSpaceOnUse')
    .attr('width', imageWidthHeight)
    .attr('height', imageWidthHeight)
    // .attr("transform", "translate(40,80)")
    .append("image")
    // .html("xlink:href", "img/" + function(d) { return d.image; })
    .attr("xlink:href", "http://www.public-domain-photos.com/free-stock-photos-4/travel/yosemite/yosemite-meadows.jpg")
    .attr('width', imageWidthHeight)
    .attr('height', imageWidthHeight)
    // .attr("transform", "translate(40,80)");

Кроме того, невозможно перевести контейнер/изображение в центр круга. Я пока закомментировал эти биты, потому что это все портит.

Пытались применить информацию из этих обсуждений, но все равно застряли. Спасибо.

http://bl.ocks.org/mbostock/950642#graph.json

https://groups.google.com/forum/#!topic/d3-js/fL8_1BLrCyo

Как вместо этого заполнить D3 SVG изображением цвета с заливкой?

Добавление элементов в узлы кругового пакета D3


javascript svg image d3.js circle-pack
person airwwwave    schedule 11.05.2015    source источник
comment
css-tricks.com/scale-svg Это то, что вы ищете?   -  person Persijn    schedule 11.05.2015
comment
@Persijn Спасибо. Но в этой статье обсуждается масштабирование svg. Мне нужно масштабировать растровое изображение, например фотографию, в контейнере svg как обсуждалось здесь. Я обновлю свой вопрос, чтобы сделать это более ясным. Спасибо.   -  person airwwwave    schedule 11.05.2015
comment
взгляните на свойство preserveAspectRatio, но с скрипка было бы легче помочь вам.   -  person Kaiido    schedule 11.05.2015
comment
@ Кайидо, спасибо. Обновление для добавления скрипки. JSFIDDLE   -  person airwwwave    schedule 11.05.2015

Ответы (1)


arrow_upward
1
arrow_downward

Ответ JSFIDDLE

Понятно. Хитрость заключалась в том, чтобы изменить это ужасное:

(d.x - v[0]) * k

к этому еще худшему ужасному:

(((d.x - v[0]) * (k)) - ((d.r / 2) * k))

Затем то же самое для у.

Не поймите меня неправильно, я благодарен за шаблон пакета Zoom Circle и гениев, которые его собрали. Спасибо. Это просто для кого-то моего нубского уровня, код выше выглядит как какое-то наказание. :)

person airwwwave    schedule 13.05.2015