[英]Displaying circles using d3 from data
In this fiddle I'm attempting to draw circles read from a file : 在这个小提琴中,我试图绘制从文件读取的圆圈:
http://jsfiddle.net/zzz8svuq/17/ http://jsfiddle.net/zzz8svuq/17/
But no circles are appearing. 但是没有圆圈出现。
Here I am binding the data to svg : 在这里,我将数据绑定到svg:
svg.data(data)
.enter().append("circle")
.attr("stroke", "red")
.attr("stroke-width" , "2px")
.attr("cx", xMap)
This is not correct ? 这是不正确的?
fiddle code : 小提琴代码:
var data = d3.csv.parse( d3.select("pre#data").text() );
var margin = {top: 20, right: 20, bottom: 130, left: 140},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var svg = d3.select("body").append("svg")
.attr("width", 500)
.attr("height",500)
.append("g");
var xValue = function (data) {
return data.x;
}
xScale = d3.scale.linear().range([0, width - margin.left - margin.right]) // value -> display
xMap = function (d) {
return xScale(xValue(d));
}
svg.data(data)
.enter().append("circle")
.attr("stroke", "red")
.attr("stroke-width" , "2px")
.attr("cx", xMap)
<pre style="display:none" id="data">
label,x,y,r
l1,100,30,50
l2,5,5,100
l3,50,50,20
</pre>
body {
font: 11px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
Update : 更新:
Added 添加
.attr("cy", 5)
.attr("r", 5)
but same result 但结果相同
circles need 3 attributes cx, cy (the position) and r (the radius). 圆需要3个属性cx,cy(位置)和r(半径)。 You are not supplying cy or r and r defaults to 0 which means your circles are not rendered.
您未提供cy或r,并且r的默认值为0,这表示您的圆未渲染。
If you want to append circles to a container from json data, you will have bind the data to a selection inside the container instead of bind data to the container. 如果要从json数据中将圆附加到容器,则需要将数据绑定到容器中的选定内容,而不是将数据绑定到容器。 Try this way.
尝试这种方式。
svg.selectAll("circle")
.data(data)
.enter().append("circle")
.attr("stroke", "red")
.attr("stroke-width" , "2px")
.attr("cx", xMap) //Center point X
.attr("cy", yMap) // Center point Y
.attr("r", 5); //Radius
Confirm that cx, cy and r attributes are valid. 确认cx,cy和r属性有效。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.