Question

我为x和y创建了两个比例，两个都在工作。现在当我尝试用圆圈的半径做同样的事情时它不会显示它们，也不会抛出任何错误.....可能是什么问题。 codepen如下：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);

Answer 1

检查您的控制台：您有很多NaN。它们来自你的rScale。

这是问题：在JavaScript中，返回语句后跟换行符告诉浏览器在返回后应该插入一个分号。所以，当你写：

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

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

1 个答案: