45

svgには丸みを帯びた角を実行する関数が組み込まれていることは知っていますが、四隅のうち2つだけで丸みを帯びた角を実行する必要があります。

それを模倣するために複数の長方形を重ねて描くことができることは知っていますが、それはちょっと安っぽいようです。クリッピングまたはd3.jsメソッドを使用してそれを行う方法はありますか？

現在、次のような四角形の横棒グラフがあります。

    rects.enter().append("rect")
        .attr("x",function(d,i) { return x(0); })
        .attr("width",function(d) { return x(d.value) - x(0); })
        .attr("height",y.rangeBand())
        .attr("y",function(d) { return y(d.name); })

長方形の右側に丸みを帯びた角を作ろうとしていますが、その方法がわかりません。

4

5 に答える 5

71

@ robert-longsonの答えを拡張すると、SVGの楕円弧コマンドを使用して、直定規のlinetoコマンドと組み合わせてコーナーを作成できます。これらはパス要素で使用されます。考えられる実装の1つは次のとおりです。

// Returns path data for a rectangle with rounded right corners.
// The top-left corner is ⟨x,y⟩.
function rightRoundedRect(x, y, width, height, radius) {
  return "M" + x + "," + y
       + "h" + (width - radius)
       + "a" + radius + "," + radius + " 0 0 1 " + radius + "," + radius
       + "v" + (height - 2 * radius)
       + "a" + radius + "," + radius + " 0 0 1 " + -radius + "," + radius
       + "h" + (radius - width)
       + "z";
}

次に、この関数を呼び出して「d」属性を計算できます。例えば：

rects.enter().append("path")
    .attr("d", function(d) {
      return rightRoundedRect(x(0), y(d.name), x(d.value) - x(0), y.rangeBand(), 10);
    });

実例：

オプション：必要に応じて、多くの引数を取るのではなく、rightRoundedRect関数をリファクタリングして構成可能にすることができます。このアプローチは、D3の組み込みシェイプジェネレーターに似ています。たとえば、次のようなrectジェネレータを使用できます。

rects.enter().append("path")
    .attr("d", rightRoundedRect()
      .x(x(0))
      .y(function(d) { return y(d.name); })
      .width(function(d) { return x(d.value) - x(0); })
      .height(y.rangeBand())
      .radius(10));

このアプローチの詳細については、構成可能な関数のチュートリアルを参照してください。

于 2012-08-25T17:32:02.723 に答える
37

与えられた答えを拡張するために、ここにあなたのrectのパスを返すためのより包括的な関数があります。

x: x-coordinate
y: y-coordinate
w: width
h: height
r: corner radius
tl: top_left rounded?
tr: top_right rounded?
bl: bottom_left rounded?
br: bottom_right rounded?

function rounded_rect(x, y, w, h, r, tl, tr, bl, br) {
    var retval;
    retval  = "M" + (x + r) + "," + y;
    retval += "h" + (w - 2*r);
    if (tr) { retval += "a" + r + "," + r + " 0 0 1 " + r + "," + r; }
    else { retval += "h" + r; retval += "v" + r; }
    retval += "v" + (h - 2*r);
    if (br) { retval += "a" + r + "," + r + " 0 0 1 " + -r + "," + r; }
    else { retval += "v" + r; retval += "h" + -r; }
    retval += "h" + (2*r - w);
    if (bl) { retval += "a" + r + "," + r + " 0 0 1 " + -r + "," + -r; }
    else { retval += "h" + -r; retval += "v" + -r; }
    retval += "v" + (2*r - h);
    if (tl) { retval += "a" + r + "," + r + " 0 0 1 " + r + "," + -r; }
    else { retval += "v" + -r; retval += "h" + r; }
    retval += "z";
    return retval;
}
于 2012-11-22T03:50:44.207 に答える
22

他の人が要素のすべての角を丸めたいと思っている場合は、要素に属性をrect追加できます（@mbostockが上記のフィドルで述べているように）：rxrect

var rectangle = group.append("rect")
    .attr("width", 60)
    .attr("height", 75)
    .attr("rx", 4)
    .style("fill", function(d) { return "#e6653e"; })
    .style("stroke", function(d) { return d3.rgb("#e6653e").darker(); })
于 2017-01-23T12:53:22.633 に答える
5

Eslintedバージョンのstackmate-sの答えを探している人は誰でも：

function roundedRect(x, y, w, h, r, tl, tr, bl, br) {
  let retval;
  retval = `M${x + r},${y}`;
  retval += `h${w - (2 * r)}`;
  if (tr) {
    retval += `a${r},${r} 0 0 1 ${r},${r}`;
  } else {
    retval += `h${r}`; retval += `v${r}`;
  }
  retval += `v${h - (2 * r)}`;
  if (br) {
    retval += `a${r},${r} 0 0 1 ${-r},${r}`;
  } else {
    retval += `v${r}`; retval += `h${-r}`;
  }
  retval += `h${(2 * r) - w}`;
  if (bl) {
    retval += `a${r},${r} 0 0 1 ${-r},${-r}`;
  } else {
    retval += `h${-r}`; retval += `v${-r}`;
  }
  retval += `v${((2 * r) - h)}`;
  if (tl) {
    retval += `a${r},${r} 0 0 1 ${r},${-r}`;
  } else {
    retval += `v${-r}`; retval += `h${r}`;
  }
  retval += 'z';
  return retval;
}
于 2017-02-24T14:38:50.260 に答える
1

私は最近、d3で上部が丸い棒グラフを作成するために、この問題に直面しました。見つけたソリューションのコードサンドボックスデモを作成しました。

于 2019-12-13T10:29:42.537 に答える