我只能得到矩形。无法弄清楚如何在底部进行切割?
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 中获取上述形状或元素?有人帮忙
最佳答案
使用 SVG 路径。
d
属性计算
- 移动到 x,y
- 直线到(x+width),y
- 线到(x+宽度),(y+高度)
- 从当前点到 (x+width)/2 的二次贝塞尔曲线, required_curve_height 到 x,(y+height)
- 闭合路径(终点到起点)
引用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>
关于javascript - 在 d3 js 中切割底部圆弧的矩形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33909931/