Question

是否可以制作矩形curved或arched shaped。这是我的jsfiddle https://jsfiddle.net/dibyendu/y8pthz2x/。我想使用d3

在雷达图表轴上制作这些矩形弧/曲线

Answer 1

完整示例： https://jsfiddle.net/jrxdbctz/5/

中间步骤：
只有一个弧： https://jsfiddle.net/jrxdbctz/2/

将x和y反转为不同的样式： https://jsfiddle.net/jrxdbctz/3/

宽度栏： https://jsfiddle.net/jrxdbctz/4/

使用d3.js绘制弧的示例（改编自Rectangle with a bottom arc cut in d3 js）：

＆＃13;

var data = [3];
var width = 325,
  height = 430;

var svgContainer = d3.select("#yourrank")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

svgContainer.selectAll("path")
  .data(data)
  .enter()
  .append("path") 
  .attr("d",function(d) { 
    var x0 = 0;
    var x1 = 200;
    var y1 = 50; 
    var y2 = 100;
    var k= parseFloat((x0+x1)/2); 
    return "M " + x0 +","+y1+" Q "+k+","+ (y1-100) +" " + x1 + ","+y1 
    + "L " + x1 +","+y2+" Q "+k+","+ (y2-100) +" " + x0 + ","+y2
    + " Z"; 
  })
  .attr("fill", "#F2135D")
  .attr("stroke", "gray");

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="yourrank"></div>

＆＃13;

M = moveto

L = lineto

Q表示：

另一种可用的贝塞尔曲线是二次贝塞尔曲线Q.它实际上是一条比立方曲线更简单的曲线：它只需要一个控制点，它决定了两个控制点的曲线斜率。起点和终点。它需要两个参数：控制点和曲线的终点。

有关M Q L如何运作的更多文档，您需要咨询 http://www.w3schools.com/svg/svg_path.asp https://developer.mozilla.org/en/docs/Web/SVG/Tutorial/Paths

如何在d3.js中制作弧形/曲线的矩形

1 个答案: