Question

我试图将存储在github中的.csv链接到我的d3代码。有人知道我有什么遗失的吗？我能用LeafLet而不是用D3做到这一点。任何帮助将受到高度赞赏。谢谢！

<!DOCTYPE html>
  <html>
   <head>

   <meta charset="utf-8">
     <title>D3!!</title>
     </head>
  <body>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script 
   src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js">
  </script>
   <script src="https://d3js.org/d3-selection-multi.v0.4.min.js"></script>
      <script>

 var outerWidth=500;
 var outerheight=250;
 var margin={left:-50, top:0, right:-50, bottom:0};
 var xColumn="longitude";
 var yColumn="latitude";
 var rColumn="population";
 var peoplePerPixel=1000000;
 var innerWidth=outerWidth - margin.left - margin.right;
 var innerHeight=outerheight - margin.top - margin.bottom;

 var svg=d3.select("body").append("svg")
   .attr("width", outerWidth)
   .attr("height", outerheight);

     var g= svg.append("g")
   .attr("transform", "translate (" + margin.left + "," +margin.top +")");
 var xScale= d3.scaleLog()
 .range([0,innerWidth]);
 var yScale= d3.scaleLog()
 .range([innerHeight,0]);
 var rScale= d3.scaleSqrt();

 function render (data){
 xScale.domain(d3.extent(data, function (d){return d[xColumn]; }));
 yScale.domain(d3.extent(data, function (d){return d[yColumn]; }));
 rScale.domain([0, d3.max(data, function (d){return d[xColumn]; })]);

 var circles= svg.selectAll("circle").data(data);
 circles.enter().append("circle");
 circles
   .attr("cx", function(d){ return xScale(d[xColumn]);})
   .attr("cy", function(d){ return yScale(d[yColumn]);})
   .attr("r", function(d){ return rScale(d[rColumn]);});
   circles.exit().remove();
      }

 function type(d) {
   d.latitude=+d.latitude;
   d.longitude=+d.longitude;
   d.population=+d.population;
   return d;
      }


 var data =           


    d3.csv(
  "https://raw.githubusercontent.com/Pre60/myTest/master/map_cities.csv",      
       type, render)


</script>
</body>
</html>

Answer 1

你有一些问题：

您正在将属性设置为“更新”选项。这不起作用（除非你调用该函数两次）。它必须是：
```
circles.enter()
    .append("circle")
    .attr("cx", function(d) {
    //etc...
```
因此，您的SVG中没有圈子。但是，更改该点＃1会显示另外两个问题：
您使用的域名越过零scaleLog。没有log为零（实际上，它是负无穷大）。正如API清楚地说：

当log（0）=-∞时，对数标度域必须是严格为正或严格为负;域名不得包含或交叉零。

因此，请使用线性比例。
您使用的是半径错误的属性。它应该是rColumn。
您忘记设置rScale。

总之，这是你的（差不多）工作代码：

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js">


</script>
<script src="https://d3js.org/d3-selection-multi.v0.4.min.js"></script>
<script>
  var outerWidth = 500;
  var outerheight = 250;
  var margin = {
    left: -50,
    top: 0,
    right: -50,
    bottom: 0
  };
  var xColumn = "longitude";
  var yColumn = "latitude";
  var rColumn = "population";
  var peoplePerPixel = 1000000;
  var innerWidth = outerWidth - margin.left - margin.right;
  var innerHeight = outerheight - margin.top - margin.bottom;

  var svg = d3.select("body").append("svg")
    .attr("width", outerWidth)
    .attr("height", outerheight);

  var g = svg.append("g")
    .attr("transform", "translate (" + margin.left + "," + margin.top + ")");
  var xScale = d3.scaleLinear()
    .range([0, innerWidth]);
  var yScale = d3.scaleLinear()
    .range([innerHeight, 0]);
  var rScale = d3.scaleSqrt().range([1, 5]);

  function render(data) {
    xScale.domain(d3.extent(data, function(d) {
      return d[xColumn];
    }));
    yScale.domain(d3.extent(data, function(d) {
      return d[yColumn];
    }));
    rScale.domain([0, d3.max(data, function(d) {
      return d[rColumn];
    })]);

    var circles = svg.selectAll("circle").data(data);
    circles.enter().append("circle").attr("cx", function(d) {
        return xScale(d[xColumn]);
      })
      .attr("cy", function(d) {
        return yScale(d[yColumn]);
      })
      .attr("r", function(d) {
        return rScale(d[rColumn]);
      });
    circles.exit().remove();
  }

  function type(d) {
    d.latitude = +d.latitude;
    d.longitude = +d.longitude;
    d.population = +d.population;
    return d;
  }


  var data = d3.csv(
      "https://raw.githubusercontent.com/Pre60/myTest/master/map_cities.csv",
      type, render)

</script>

PS：写var data = d3.csv(url, callback)没有区别，因为d3.csv不返回任何内容（实际上，它返回与请求相关的对象）。所以，只需删除var data。

d3.csv链接了GitHub

1 个答案: