jjzjj

javascript - D3.js - JSON 数据数组将相同的数组元素绑定(bind)到所有内容

coder 2024-05-06 原文

我正在加载一个包含对象数组的 GeoJSON 数据文件，每个对象都包含不同国家轮廓的矢量信息。相同的数组元素被绑定(bind)到每个 DOM 元素。我之前在 JavaScript 中遇到过这个范围问题，但我所做的每一次更改都没有导致任何加载。

我附上了 jsfiddle .我使用了一个示例数据文件，它似乎需要几秒钟才能加载。

我在 jsfiddle 中的代码如下所示:

$(document).ready(function() {
  d3.json(
    "https://raw.githubusercontent.com/datasets/geo-boundaries-world-110m/master/countries.geojson",
    function(error, data) {
      var myGeoJSON = data.features;

      for (i = 0; i < myGeoJSON.length; i++) {
        var path = d3.geo.path();
        var width = 960;
        var height = 600;
        var svg = d3.select("body").append("svg")
          .attr("width", width)
          .attr("height", height);

        svg.selectAll("path")
          .data(data.features)
          .enter().append("path")
          .attr("d",path)
          .attr("fill","#3e429a");
      }
    }
  );
});

最佳答案

您不需要遍历特征数组。您的数据文件是一个 FeatureCollection，D3 can draw ，作为单个路径元素:

svg.append("path").datum(data).attr("d", d3.geo.path());

或作为单独的路径元素，每个要素(国家/地区)一个:

svg.selectAll("path").data(data.features)
  .enter().append("path").attr("d", d3.geo.path())

默认情况下 D3 使用投影 d3.geo.albersUsa()它将夏威夷带到墨西哥，将阿拉斯加带到热带之外。您可以切换到 equirectangular projection看整个世界:

d3.json(
  "https://raw.githubusercontent.com/datasets/geo-boundaries-world-110m/6cf0946a0f4d027d21686e8402f19b524c4f6385/countries.geojson",
  function(error, data) {
    var projection = d3.geo.equirectangular();
    var path = d3.geo.path().projection(projection);
    var width = 960;
    var height = 600;
    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);

    svg.selectAll("path")
      .data(data.features)
      .enter().append("path")
      .attr("d", path)
      .attr("fill", "#3e429a");
  }
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

结语:我最初尝试使用更常见的 Mercator projection , 才发现 it cannot handle Antarctica . D3 绘制大陆的形状，然后填充其余的海洋。

在同一个 D3 论坛帖子中，D3 的作者 mentioned a bug in the TopoJSON tool用于生成 map ，所以这可能是您使用的数据文件的问题。如果您更喜欢 Mercator，您可能需要与 geo-boundaries-world-110m 的维护者合作修复数据文件，或者只是从您的 map 中排除南极洲。

墨卡托的南极洲演示:

d3.json(
  "https://raw.githubusercontent.com/datasets/geo-boundaries-world-110m/6cf0946a0f4d027d21686e8402f19b524c4f6385/countries.geojson",
  function(error, data) {
    var projection = d3.geo.mercator();
    var path = d3.geo.path().projection(projection);
    var width = 960;
    var height = 600;
    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);

    var antarctica = data.features.splice(6, 1);
    // now "data" has the rest of the world
    svg.selectAll("path")
      .data(antarctica)
      .enter().append("path")
      .attr("d", path)
      .attr("stroke", "red").attr("stroke-width", 10)
      // thick borders so we can see the odd paths
      .attr("fill", "#3e429a");
  }
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

关于javascript - D3.js - JSON 数据数组将相同的数组元素绑定(bind)到所有内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32903210/

javascriptJSON34sectionpathd3.js

有关javascript - D3.js - JSON 数据数组将相同的数组元素绑定(bind)到所有内容的更多相关文章

  1. ruby-on-rails - 在 Ruby 中循环遍历多个数组 - 2

    我有多个ActiveRecord子类Item的实例数组，我需要根据最早的事件循环打印。在这种情况下，我需要打印付款和维护日期，如下所示:ItemAmaintenancerequiredin5daysItemBpaymentrequiredin6daysItemApaymentrequiredin7daysItemBmaintenancerequiredin8days我目前有两个查询，用于查找maintenance和payment项目(非排他性查询)，并输出如下内容:paymentrequiredin...maintenancerequiredin...有什么方法可以改善上述(丑陋的)代

  2. ruby - 解析 RDFa、微数据等的最佳方式是什么，使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

    我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

  3. ruby - 多次弹出/移动 ruby​​ 数组 - 2

    我的代码目前看起来像这样numbers=[1,2,3,4,5]defpop_threepop=[]3.times{pop有没有办法在一行中完成pop_three方法中的内容？我基本上想做类似numbers.slice(0,3)的事情，但要删除切片中的数组项。嗯...嗯，我想我刚刚意识到我可以试试slice! 最佳答案 是numbers.pop(3)或者numbers.shift(3)如果你想要另一边。 关于ruby-多次弹出/移动ruby​​数组，我们在StackOverflow上找到一

  4. ruby - 将数组的内容转换为 int - 2

    我需要读入一个包含数字列表的文件。此代码读取文件并将其放入二维数组中。现在我需要获取数组中所有数字的平均值，但我需要将数组的内容更改为int。有什么想法可以将to_i方法放在哪里吗？ClassTerraindefinitializefile_name@input=IO.readlines(file_name)#readinfile@size=@input[0].to_i@land=[@size]x=1whilex 最佳答案 只需将数组映射为整数:@land边注如果你想得到一条线的平均值，你可以这样做:values=@input[x]

  5. ruby - 通过 erb 模板输出 ruby​​ 数组 - 2

    我正在使用puppet为ruby​​程序提供一组常量。我需要提供一组主机名，我的程序将对其进行迭代。在我之前使用的bash脚本中，我只是将它作为一个puppet变量hosts=>"host1,host2"我将其提供给bash脚本作为HOSTS=显然这对ruby​​不太适用——我需要它的格式hosts=["host1","host2"]自从phosts和putsmy_array.inspect提供输出["host1","host2"]我希望使用其中之一。不幸的是，我终其一生都无法弄清楚如何让它发挥作用。我尝试了以下各项:我发现某处他们指出我需要在函数调用前放置“function_”……这

  6. ruby - 检查数组是否在增加 - 2

    这个问题在这里已经有了答案:Checktoseeifanarrayisalreadysorted?(8个答案)关闭9年前。我只是想知道是否有办法检查数组是否在增加？这是我的解决方案，但我正在寻找更漂亮的方法:n=-1@arr.flatten.each{|e|returnfalseife

  7. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  8. ruby - ruby 中的 TOPLEVEL_BINDING 是什么？ - 2

    它不等于主线程的binding，这个toplevel作用域是什么？此作用域与主线程中的binding有何不同？>ruby-e'putsTOPLEVEL_BINDING===binding'false 最佳答案 事实是，TOPLEVEL_BINDING始终引用Binding的预定义全局实例，而Kernel#binding创建的新实例>Binding每次封装当前执行上下文。在顶层，它们都包含相同的绑定(bind)，但它们不是同一个对象，您无法使用==或===测试它们的绑定(bind)相等性。putsTOPLEVEL_BINDINGput

  9. ruby - 如果指定键的值在数组中相同，如何合并哈希 - 2

    我有一个这样的哈希数组:[{:foo=>2,:date=>Sat,01Sep2014},{:foo2=>2,:date=>Sat,02Sep2014},{:foo3=>3,:date=>Sat,01Sep2014},{:foo4=>4,:date=>Sat,03Sep2014},{:foo5=>5,:date=>Sat,02Sep2014}]如果:date相同，我想合并哈希值。我对上面数组的期望是:[{:foo=>2,:foo3=>3,:date=>Sat,01Sep2014},{:foo2=>2,:foo5=>5:date=>Sat,02Sep2014},{:foo4=>4,:dat

  10. ruby - 在 Ruby 中用键盘诅咒数组浏览 - 2

    我正在尝试在Ruby中制作一个cli应用程序，它接受一个给定的数组，然后将其显示为一个列表，我可以使用箭头键浏览它。我觉得我已经在Ruby中看到一个库已经这样做了，但我记不起它的名字了。我正在尝试对soundcloud2000中的代码进行逆向工程做类似的事情，但他的代码与SoundcloudAPI的使用紧密耦合。我知道cursesgem，我正在考虑更抽象的东西。广告有没有人见过可以做到这一点的库或一些概念证明的Ruby代码可以做到这一点？ 最佳答案 我不知道这是否是您正在寻找的，但也许您可以使用我的想法。由于我没有关于您要完成的工作

随机推荐