代码之家 › 专栏 › 技术社区 › ttmt

D3 svg css-使用css围绕中心旋转线条

svg d3.js css

ttmt · 技术社区 · 8 年前

我这里有一个抢劫犯- https://plnkr.co/edit/E2SJlCo141NhYatVEFMU?p=preview

我有三个酒吧是由一个开始和结束位置。

开始位置可以高于或低于结束位置。

我想在横杆上画箭头来说明开始是在结束之前还是之后。

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

这是所有的工作,但箭头不是围绕其中心旋转,所以是定位离开酒吧。

有没有可能把箭头和线绕着它的中心旋转

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

1 回复 | 直到 8 年前

Bryan 8 年前

这看起来像是SVG中的transform origin支持的问题-“关键字和百分比指的是画布而不是对象本身”。看到了吗 Browser compatibility section here . 这条评论是在Firefox上列出的,但我在Chrome上也遇到了同样的问题。

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

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

因此,可以直接在SVG行上使用旋转变换。下面的plunker有您需要的代码的开头,但是您需要从数据中计算中心x和y值。

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

这是您需要的代码位,但正如我所说的,您需要用旋转中心x和y值替换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)`
    })