个人中心
gpt4 book ai didi

javascript - d3.csv 链接 GitHub

转载 作者：行者123 更新时间：2023-11-28 04:41:38 25 4
gpt4 key购买 nike

我正在尝试将 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>

最佳答案

您遇到一些问题:

  1. 您正在将属性设置为“更新”选择。这将不起作用(除非您调用该函数两次)。它必须是:

    circles.enter()
        .append("circle")
        .attr("cx", function(d) {
        //etc...

    因此，您的 SVG 中没有圆圈。然而，改变第一点会带来两个额外的问题:

  2. 您使用的 scaleLog 的域过零。不存在零的log(实际上，它是负无穷大)。正如 API 明确指出的那样:

    As log(0) = -∞, a log scale domain must be strictly-positive or strictly-negative; the domain must not include or cross zero.

    因此，请使用线性比例尺。

  3. 您使用了错误的半径属性。它应该是rColumn。

  4. 您忘记设置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 即可。

关于javascript - d3.csv 链接 GitHub，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43720327/

25 4 0
文章推荐： c++ - 如何使用espeak_EVENT_TYPE；
文章推荐： javascript - 表单 onSubmit 不调用 javascript 函数
文章推荐： c++ - 成员模板函数指针错误
文章推荐： php - 静态网页 vs MySql 生成
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com