底部弧形切割为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 +宽度），y
• 线到（x +宽度），（y +高度）
• 从当前点到（x +宽度）/ 2的二次贝塞尔曲线，required_curve_height到x，（y + height）
• 关闭路径（终点到起点）

请参阅此处了解更多详情。

SVG <path>元素用于绘制从线条，圆弧，曲线等组合的高级形状，有或没有填充。 <path>元素可能是它们中最先进和多功能的SVG形状。

 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>