D3 svg css - вращать линию вокруг центра с помощью css

Question

У меня есть плунжер здесь - https://plnkr.co/edit/E2SJlCo141NhYatVEFMU?p=preview

У меня есть 3 три бара, которые сделаны с положением начала и конца.

Начальная позиция может быть выше или ниже финиша.

Я хочу нарисовать стрелки на брусьях, чтобы проиллюстрировать начало до или после финиша.

Я рисую стрелки на барах и добавляю классы, основываясь на том, поднимается или опускается бар.

Затем я хотел использовать css, чтобы задать направление стрелок, вращая их.

Это все работает, но стрелка не вращается вокруг своего центра, поэтому она расположена вне полосы.

Можно ли вращать стрелку и линию вокруг ее центра

.arrow-up{
  transform: rotate(180deg);
  transform-origin: center center;  
}

Answer 1

Похоже, что это проблема поддержки трансформации в SVG - «Ключевые слова и проценты относятся к холсту, а не к самому объекту». см. раздел совместимости браузера здесь . Этот комментарий был указан для Firefox, но у меня такая же проблема и для Chrome.

Для демонстрации я заставил все 3 стрелки использовать класс со стрелками вверх, и вы можете видеть, что они вращаются вокруг одной и той же точки.

https://plnkr.co/edit/yQ4X18eb7VCItxXswMww?p=preview

Таким образом, вы можете использовать преобразование поворота непосредственно на линии SVG. У следующего плунжера есть начало нужного вам кода, но вам нужно вычислить ваши центральные значения x и y для ваших данных.

https://plnkr.co/edit/JyT9ORnnMCETgpMyCjm1?p=preview

Вот фрагмент кода, который вам нужен, но, как я уже сказал, вам нужно заменить 100 100 на значения x и y вашего центра вращения. Вы также сможете обойтись без классов со стрелками вверх и вниз.

bar.enter()
    .append("line")
    .attr("x1", d => x(d.phase) + x.bandwidth()/2)  
    .attr("y1", (d, i) => {
      if(d.start < d.finish){
        return y(d.finish)+10;
      }else{
        return y(d.start)+10;
      }
    })  
    .attr("x2", d => x(d.phase) + x.bandwidth()/2)  
    .attr("y2", (d, i) => {
      if(d.finish < d.start){
        return y(d.finish)-15;
      }else{
        return y(d.start)-15;
      }
    })  
    .attr('class', (d, i) => {
      return d.start > d.finish ? 'arrow-up' : 'arrow-up'
    })
    .attr("stroke","red")  
    .attr("stroke-width",2)
    .attr("marker-end","url(#arrow)")
    .attr("transform", (d) => {
      console.log(d.start, d.finish)
      console.log(x(d.phase), x.bandwidth()/2)
      return `rotate(180 100 100)`
    })