Question

我在这里有一个矮人-https://plnkr.co/edit/E2SJlCo141NhYatVEFMU?p=preview

我有3个由开始和结束位置组成的三个条。

开始位置可以高于或低于终点。

我想在条形图上画箭头以说明起点是在终点之前还是终点之后。

我在条形图上绘制箭头，并根据条形图是向上还是向下添加类。

然后我想使用CSS通过旋转箭头来设置箭头的方向。

这一切正常，但是箭头未围绕其中心旋转，因此位于条形图的旁边。

是否可以围绕其中心旋转箭头和直线

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

Answer 1

这看起来像是SVG中的转换源支持问题-“关键字和百分比是指画布而不是对象本身”。请参阅Browser compatibility section here。该评论是针对Firefox列出的，但对于Chrome浏览器，我也遇到同样的问题。

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

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

因此，您可以直接在SVG线上使用旋转变换。下面的代码是您需要的代码的开头，但是您需要计算数据中的x和y居中。

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

这是您需要的代码，但是正如我所说，您需要用旋转中心x和y值替换100 100。您也可以省去上箭头和下箭头类。

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)`
    })

D3 SVG CSS-使用CSS围绕中心旋转线

1 个答案: