带d3底部弧线的矩形js

Question

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

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

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

如何获得使用d3.js在SVG上述形状或元件??有人帮助

Answer 1

使用SVG路径。

d属性计算

• 移动到X，Y
• 线到（x +宽度）中，y
• 线到（x +宽度），（Y +高度）
• 从当前点到（x +宽度）/ 2的二次贝塞尔曲线， required_curve_height到x，（y +高度）
• 关闭路径（终点指向起点）

有关更多详细信息，请参阅here。

的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>