Нахождение нескольких кругов новых cx, cy после перевода

d3.js

86 просмотра

1 ответ

Итак, у меня есть два круга, SustainCircle и один, на который ссылается в настоящее время this. Я применяю преобразования к обоим кругам, вот так:

    d3.select(this).transition()
    .duration(750)
    .attr("transform", "translate(" + d3.select(this).attr("originX") + "," + d3.select(this).attr("originY") + ")scale(" + scaler + ")translate(" + -d3.select(this).attr("cx") + "," + -d3.select(this).attr("cy") + ")")
    .style("stroke-width", 1.5 / scaler + "px");

    sustainableCircle.transition()
    .duration(750)
    .attr("transform", "translate(" + -.6*sustainableCircle.attr("cx") + "," + -.6*sustainableCircle.attr("cy") + ")scale(" + .3*scaler + ")")

Теперь я пытаюсь создать линию, которая начинается в thisцентральной точке круга и заканчивается в центральной точке sustainableCircle. Очевидно, что поскольку мы выполнили перевод, следующий код не работает:

      var newCLine = svg.append("line").attr({
        x1: d3.select(currentCircle).attr("cx"),
        y1: d3.select(currentCircle).attr("cy"),
        x2: sustainableCircle.attr("cx"),
        y2: sustainableCircle.attr("cy"),
        opacity: 1,
        stroke: "black"
      });

Что мне нужно сделать , чтобы получить доступ к новому cxи cyпозиции моих кругов? Для справки я использую d3 v3.5.17

Автор: DonnyBrook Источник Размещён: 08.11.2019 11:29

Ответы (1)


1 плюс

Решение

Я бы посоветовал не устанавливать настройки cx/ cyатрибуты, а translatingтакже круг. Просто используйте один метод установки позиций, чтобы упростить вашу жизнь в будущем.

Тем не менее, позиция, которую вы ищете, должна быть просто:

var cc = d3.select(currentCircle),
    cc_trans = d3.transform(cc.attr("transform")),
    cc_x = +cc.attr('cx') + trans.translate[0],
    cc_y = +cc.attr('cy') + trans.translate[1],
    sc_trans = d3.transform(sustainableCircle.attr("transform")),
    sc_x = +sustainableCircle.attr('cx') + sc_trans.translate[0],
    sc_y = +sustainableCircle.attr('cy') + sc_trans.translate[1];

var newCLine = svg.append("line").attr({
    x1: cc_x,
    y1: cc_y,
    x2: sc_x,
    y2: sc_y,
    opacity: 1,
    stroke: "black"
  });
Автор: Mark Размещён: 20.08.2016 05:12
Вопросы из категории :
32x32