在 d3 js 中切割底部圆弧的矩形

Question

我只能得到矩形。无法弄清楚如何在底部进行切割？

define(['jquery', 'knockout', 'd3', 'data/server', 'css!app/css/vista'],function($, ko, d3, server){
 return {  
  activate: function(){
   
  },
  compositionComplete: function(){
   var self = this;      
   self.loadyourRank();
  },
  loadyourRank: function(){
   var data = [3];
   var width = 325, height = 430;
       
   var svgContainer = d3.select("#yourrank")
    .append("svg")
    .attr("width", width)
    .attr("height", height);
   
   svgContainer.selectAll("rect")
    .data(data)
    .enter()
    .append("rect")
    .attr("x", 30)
    .attr("y", 50)
    .attr("width", 255)
    .attr("height", 340)
    .attr("fill", "#F2135D")
    .attr("stroke", "gray"); 
   
  }
    };
});

<div class="card">
 <div class="row">
  <div id="yourrank" class="col-xs-4">
   <h4>Your Rank</h4>
  </div>
  <div id="bestrank" class="col-xs-8">
   <h4>Your Best Ranked Specialities</h4>
  </div>  
 </div>  
</div>

如何使用 d3.js 在 svg 中获取上述形状或元素？？有人帮忙

Answer 1

使用 SVG 路径。

d属性计算

移动到 x,y
直线到 (x+width),y
线到 (x+width),(y+height)
从当前点到(x+width)/2的二次贝塞尔曲线， required_curve_height 至 x,(y+身高)
关闭路径（终点到起点）

参考here了解更多详情。

The SVG <path> element is used to draw advanced shapes combined from lines, arcs, curves etc. with or without fill. The <path> element is probably the most advanced and versatile SVG shape of them all.

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", "M 30,50 L 285,50 L 285,390 Q 157.5,200  30,390 Z")
  .attr("fill", "#F2135D")
  .attr("stroke", "gray");

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

在 d3 js 中切割底部圆弧的矩形

Rectangle with a bottom arc cut in d3 js

html

javascript

svg

data-visualization

d3.js