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 中的 transform-origin 支持的问题 - “关键字和百分比是指画布而不是对象本身”。见Browser compatibility section here。该评论是针对 Firefox 列出的，但我在 Chrome 上也遇到了同样的问题。

为了演示，我强制所有 3 个箭头使用向上箭头类，您可以看到它们似乎围绕同一点旋转。

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

因此，您可以直接在 SVG 行上使用旋转变换。以下 plunker 具有您需要的代码的开头，但您需要计算数据的中心 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)`
    })