Html 使用 D3 绘制圆圈
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18250263/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Draw circles using D3
提问by Abdelrahman Shoman
The following code is supoosed to draw five circles next to each other
下面的代码被用来绘制五个相邻的圆圈
<head>
<script type='text/javascript' src='jquery-2.0.3.min.js'></script>
<script type='text/javascript' src='knockout-2.3.0.js'></script>
<script type='text/javascript' src='knockout-2.3.0.js'></script>
<script type='text/javascript' src='knockout-2.3.0.js'></script>
<script src="bootstrap.min.js"></script>
<!-- Bootstrap -->
<link href="bootstrap.min.css" rel="stylesheet" media="screen">
<link href="sticky-footer.css" rel="stylesheet">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<div id="viz"></div>
<script type="text/javascript">
var dataset = [],
i = 0;
for(i=0; i<5; i++){
dataset.push(Math.round(Math.random()*100));
}
var sampleSVG = d3.select("#viz")
.append("svg")
.attr("width", 400)
.attr("height", 400);
sampleSVG.selectAll("circle")
.data(dataset)
.enter().append("circle")
.style("stroke", "gray")
.style("fill", "black")
.attr("height", 40)
.attr("width", 75)
.attr("x", 50)
.attr("y", 20);
</script>
</html>
It is not really my code I just copied it from this website http://christopheviau.com/d3_tutorial/
这不是我的代码，我只是从这个网站复制它 http://christopheviau.com/d3_tutorial/
The problem is that this code does not draw any circle. Although that when I try to use the chrome's tool inspect element, I find that the circles are there but they are not visible.
问题是这段代码没有画任何圆圈。虽然当我尝试使用 chrome 的工具检查元素时，我发现圆圈在那里但它们不可见。
I thought that the reason is the white colour of the circles although the stroke is not. However changing the colour was not really useful.
我认为原因是圆圈的白色，尽管笔画不是。然而，改变颜色并不是很有用。
And the problem is that Dreamweaver is not really helping as it does for HTML or JavaScript for example.
问题是 Dreamweaver 并没有像 HTML 或 JavaScript 那样真正有帮助。
Any suggestions for the solution of this issue, or any recommendation for the editor ?
对这个问题的解决有什么建议，或者对编辑有什么建议？
回答by Robert Longson
It looks like you took an example that generated rectangles and changed it to circles but circles don't have x, y, height and width attributes, they have cx, cy and radius attributes instead.
看起来您举了一个生成矩形并将其更改为圆形的示例，但圆形没有 x、y、高度和宽度属性，而是具有cx、cy 和半径属性。
sampleSVG.selectAll("circle")
.data(dataset)
.enter().append("circle")
.style("stroke", "gray")
.style("fill", "black")
.attr("r", 40)
.attr("cx", 50)
.attr("cy", 20);
Will draw multiple circles one on top of another.
将在另一个之上绘制多个圆圈。
回答by Abdelrahman Shoman
@Robert Longson Thank Robert Longson
@Robert Longson 感谢 Robert Longson
And if you want to avoid the interlapping between the circles Here is the code
如果你想避免圆圈之间的交错这里是代码
<script type="text/javascript">
var dataset = [],
i = 0;
for(i=0; i<5; i++){
dataset.push(Math.round(Math.random()*100));
}
var sampleSVG = d3.select("#viz")
.append("svg")
.attr("width", 500)
.attr("height", 300);
sampleSVG.selectAll("circle")
.data(dataset)
.enter().append("circle")
.style("stroke", "gray")
.style("fill", "white")
.attr("r", 40)
.attr("cx", function(d, i){return 50 + (i*80)})
.attr("cy", 120);
</script>
