[英]D3.js: Scale for circle radius is not displaying the circles
我为 x 和 y 创建了两个比例,并且都在工作。 现在,当我尝试对圆的半径做同样的事情时,它不会显示它们,也不会抛出任何错误......可能是什么问题。 代码笔如下: http ://codepen.io/juanf03/pen/rrKxgd
var
dataset = [
[ 5, 20 ],
[ 480, 90 ],
[ 250, 50 ],
[ 100, 33 ],
[ 330, 95 ],
[ 410, 12 ],
[ 475, 44 ],
[ 25, 67 ],
[ 85, 21 ],
[ 220, 88 ]
];
var h=300,w=500;
var padding = 20;
var
xScale = d3.scaleLinear().domain([0, d3.max(dataset,
function(d) { return d[0]; })]).range([padding, w-padding*2]);
var yScale= d3.scaleLinear()
.domain([0,d3.max(dataset,function(d){
return d[1];
})]).range([h-padding,padding]);
var
rScale = d3.scaleLinear() .domain([0, d3.max(dataset,
function(d) {
return
d[1]; })]).range([2, 5]);
var svg=d3.select("body")
.append("svg")
.attr("width",w)
.attr("height",h);
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx",function(d){
return xScale(d[0]);
}).attr("cy",function(d){
return yScale(d[1]);
}).attr("r",function(d,i){
return rScale(d[1]);
});
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d){
return `${d[0]} , ${d[1]}`;
}) .attr("x", function(d) {
return xScale(d[0]);})
.attr("y", function(d) {
return yScale(d[1]);})
.attr("font-family", "sans-serif")
.attr("font-size","11px")
.attr("fill","red");
var
xAxis = d3.svg.axis() .scale(xScale) .orient("bottom");
svg.append("g")
.call(xAxis);
检查您的控制台:您有很多NaN
。 它们来自您的rScale
。
这就是问题所在:在 JavaScript 中,后跟换行符的 return 语句告诉浏览器应该在该 return 之后插入一个分号。 所以,当你写:
var rScale = d3.scaleLinear()
.domain([0, d3.max(dataset, function(d) {
return
d[1]; })])
.range([2, 5]);
你实际上是在写:
return;
d[1];
我只做了一件事:刚刚删除了新行:
return d[1];
这是你的代码笔: http ://codepen.io/anon/pen/yaEwZW?editors=1010
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.