D3.js:指定した範囲でrect要素を切り抜く

harada 32views 更新:2017年5月1日

以下のように切り抜きたい範囲を指定して、要素に指定することで指定した範囲でrect要素を切り抜けるようです。

//切り抜く範囲を指定
  svg.append("clipPath")
    .attr("id", "clip-rect")
    .append("rect")
    .attr("x", 0) 
    .attr("y", 0) 
    .attr("width", width)
    .attr("height", height);

//切り抜く要素にclip-pathを指定
svg.selectAll(".bar")
    .data(data)
    .enter().append("rect")
    .attr("clip-path", "url(#clip-rect)");

参考:Clipped Paths in d3.js (AKA clipPath)
Svg clip-path within rectangle does not work

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません