繁体   English   中英

D3.js:圆半径的比例不显示圆

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM