文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >D3和java脚本

问D3和java脚本
EN

Stack Overflow用户
提问于 2018-09-30 00:02:55
回答 1查看 63关注 0票数 0

好的，我再次重写了代码，这一次只是传递了转换函数的参数，但是它仍然没有得到这个值。

代码语言：javascript
复制
<!DOCTYPE html>
<html lang = "en" class="tas-com">
<head>
	<meta charset="utf-8">
	<title>Simple Stars</title>
		<script src="https://d3js.org/d3.v5.min.js"></script>

</head>
<body>

	<h1>Some Stars</h1>



	<svg width="200" height="200" style='background: aliceblue'>

	</svg>

	<script type="text/javascript">
	var x;
	var y;
	function draw(q,r){
		var svg1 = d3.select("svg");
		svg1.append("polygon")
				.attr("points", "0,0.9511, 1.0,0.95111, 1.309,0, 1.618,0.9511, 2.618,0.9511, 1.809,1.5388, 2.118,2.4899, 1.309,1.9021, 0.5,2.4899, 0.809,1.5388")
 				.attr("fill", "blue")
				.attr("transform", "translate(q, r), scale(4)")
				.style("fill", "yellow");
	}
		
		var svg = d3.select("svg");
		svg.append("rect")
					.attr("x", 0)
					.attr("y", 0)
					.attr("width", 200)
					.attr("height", 200)
					.style("fill", "blue");
			
				
			for (var i=0;i<150;i+=15){	
								var o=30
								draw(o+i,o+i)
			}

			
	</script>

</body>
</html>
代码语言：javascript
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.10/d3.min.js"></script>

​

嘿，我正试图和d3和javascript混在一起，并试图画出欧洲的旗帜。但是星星根本没有被展示出来。错误可能是什么？我想用这个函数来表示x，y坐标的值。所画的圆圈暂时只是占位符。

谢谢

​

代码语言：javascript
复制
<!DOCTYPE html>
<html lang = "en" class="tas-com">
<head>
	<meta charset="utf-8">
	<title>Simple Stars</title>
		<script src="https://d3js.org/d3.v5.min.js"></script>

</head>
<body>

	<h1>Some Stars</h1>

	<svg width="200" height="200" style="background: aliceblue"/>
	</svg>

	<script type="text/javascript">
	var x
	var y
	function draw(q){
		x= 100 + 60*Math.cos(q)
		y= 100 + 60*Math.sin(q)
		return x,y
	}

		var svg = d3.select("svg");
		
		svg.append("rect")
					.attr("x", 0)
					.attr("y", 0)
					.attr("width", 200)
					.attr("height", 200)
					.style("fill", "blue");
				{draw(10)	
				svg.append("polygon")
				.attr("points", "x,y, x+1.0,y, x+1.309,y-0.9511, x+1.618,y, x+2.618,y, x+1.809,y+0.5877, x+2.118,y+1.5388, x+1.309,y+0.951, x+0.5,y+1.5388, x+0.809,y+0.5877")
				.attr("transform", "translate(30, 30), scale(4)")
				.style("fill", "green");
				};
				{draw(25)	
				svg.append("circle")
					.attr("cx", x)
					.attr("cy", y)
					.attr("r", 5)
					.style("fill", "red")
				};
				{draw(40)	
				svg.append("circle")
					.attr("cx", x)
					.attr("cy", y)
					.attr("r", 5)
					.style("fill", "red")
				};
				{draw(55)	
				svg.append("circle")
					.attr("cx", x)
					.attr("cy", y)
					.attr("r", 5)
					.style("fill", "red")
				};
				
				{draw(70)	
				svg.append("circle")
					.attr("cx", x)
					.attr("cy", y)
					.attr("r", 5)
					.style("fill", "red")
				};
				{draw(85)	
				svg.append("circle")
					.attr("cx", x)
					.attr("cy", y)
					.attr("r", 5)
					.style("fill", "red")
				};
				
				{draw(100)	
				svg.append("circle")
					.attr("cx", x)
					.attr("cy", y)
					.attr("r", 5)
					.style("fill", "red")
				};
				{draw(115)	
				svg.append("circle")
					.attr("cx", x)
					.attr("cy", y)
					.attr("r", 5)
					.style("fill", "red")
				};
				{draw(130)	
				svg.append("circle")
					.attr("cx", x)
					.attr("cy", y)
					.attr("r", 5)
					.style("fill", "red")
				};
				{draw(145)	
				svg.append("circle")
					.attr("cx", x)
					.attr("cy", y)
					.attr("r", 5)
					.style("fill", "red")
				};
				{draw(160)	
				svg.append("circle")
					.attr("cx", x)
					.attr("cy", y)
					.attr("r", 5)
					.style("fill", "red")
				};
				{draw(175)	
				svg.append("circle")
					.attr("cx", x)
					.attr("cy", y)
					.attr("r", 5)
					.style("fill", "red")
				};

			
	</script>

</body>
</html>
代码语言：javascript
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

​

javascript
html
d3.js
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-09-30 13:03:34

你的重构更好但这行

代码语言：javascript
复制
.attr("transform", "translate(q, r), scale(4)")

应写为：

代码语言：javascript
复制
.attr("transform", "translate(" + q + "," + r + "), scale(4)")

下面是对整个代码进行进一步清理的部分：

​

代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en" class="tas-com">

<head>
  <meta charset="utf-8">
  <title>Simple Stars</title>
  <script src="https://d3js.org/d3.v5.min.js"></script>

</head>

<body>

  <h1>Some Stars</h1>

  <svg width="200" height="200" style='background: aliceblue'>

  </svg>

  <script type="text/javascript">
    var svg;

    function draw(q, r) {

      var x = 100 + 60 * Math.cos(q),
        y = 100 + 60 * Math.sin(q)

      svg.append("circle")
        .attr("cx", x)
        .attr("cy", y)
        .attr("r", 5)
        .style("fill", "red");

      svg.append("polygon")
        .attr("points", "0,0.9511, 1.0,0.95111, 1.309,0, 1.618,0.9511, 2.618,0.9511, 1.809,1.5388, 2.118,2.4899, 1.309,1.9021, 0.5,2.4899, 0.809,1.5388")
        .attr("fill", "blue")
        .attr("transform", "translate(" + (x - 5) + "," + (y - 5) + "), scale(4)")
        .style("fill", "yellow");
    }

    svg = d3.select("svg");

    svg.append("rect")
      .attr("x", 0)
      .attr("y", 0)
      .attr("width", 200)
      .attr("height", 200)
      .style("fill", "blue");

    for (var i = 0; i < 150; i += 15) {
      var o = 30
      draw(o + i, o + i)
    }
  </script>

</body>

</html>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/52573520

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档