标签：html javascript svg d3-js data-visualization

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

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宽度),y
>线到(x宽度),(y高度)
>从当前点到(x宽度)/ 2的二次贝塞尔曲线,
required_curve_height to 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>

标签：html,javascript,svg,d3-js,data-visualization
来源： https://codeday.me/bug/20190829/1761833.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。