svg / d3.js圆角的一个角的圆角 [英] svg / d3.js rounded corner on one corner of a rectangle

问题描述

我知道svg有一个内置的功能来做圆角，但我只需要在四个角落中的两个角落做圆角。

我知道我可以绘制多个矩形在彼此的顶部，以模仿，但这似乎是奶酪。任何方式使用剪切或任何d3.js方法吗？

现在我有一个水平条形图，有矩形如：

rects.enter（）。append（rect）
.attr（x，function（d，i）{return x ）;}）
.attr（width，function（d）{return x（d.value） - x（0）;}）
.attr（height，y.rangeBand ））
.attr（y，function（d）{return y（d.name）;}）


我想在右边的rect产生圆角，但不知道如何做。

解决方案

扩展@ robert-longson的答案，你可以使用SVG的椭圆弧命令来创建角，结合 lineto命令。这些用于路径元素。这里有一个可能的实现：

  //返回带右圆角的矩形的路径数据。 
 //左上角是⟨x，y⟩。 
 function rightRoundedRect（x，y，width，height，radius）{
 returnM+ 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函数（d）{
 return rightRoundedRect（x（0），y（d.name），x（d.value） -  x（0），y.rangeBand（），10）; 
} ）; 
  

实例：

• http://bl.ocks.org/3468167

可选：如果愿意，您可以重构righ​​tRoundedRect函数，使其可配置<的论点。此方法类似于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（））
。 
  

有关该方法的更多详细信息，请参阅可配置的功能教程。

I know svg has an in built function to do rounded corners, but I need to do rounded corners on only 2 of the four corners.

I know I can draw multiple rectangles on top of each other to imitate that, but that seems kind of cheesy. Any way to do it using clipping or any d3.js method?

Right now I have a horizontal bar graph that has rects like:

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

I'm trying to produce rounded corners on the right hand side of the rect, but not sure how to do it.

解决方案

Expanding on @robert-longson's answer, you can use SVG's elliptical arc commands to make the corners, in conjunction with lineto commands for the straight edges. These are used with path elements. Here's one possible implementation:

// 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";
}

You can then call this function to compute the "d" attribute. For example:

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

Live example:

• http://bl.ocks.org/3468167

Optional: If you like, you could refactor the rightRoundedRect function to make it configurable, rather than taking lots of arguments. This approach would be similar to D3's built-in shape generators. For example, you might use a rect generator like so:

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));

For more details on that approach, see the configurable function tutorial.

这篇关于svg / d3.js圆角的一个角的圆角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！