在 map.arc() 中循环一个 Json 对象答案

【问题标题】：Looping a Json object in map.arc()在 map.arc() 中循环一个 Json 对象
【发布时间】：2016-07-25 10:04:44
【问题描述】：

我正在使用http://jsbin.com/nutawiboci/1/edit?html,output 来显示起点和终点坐标的位置，并在它们之间画一条弧线。所以我修改了 map.arc() 以循环遍历给定的起点和终点坐标：

    for (var i = 0; i < data.length; i++) {

      var origin_long  = data[i][0][0]; 
      var origin_lat   = data[i][0][1]; 

      var destination_long = data[i][1][0]; 
      var destination_lat  = data[i][1][1]; 



        map.arc([
          {
            origin: {
                latitude: origin_lat,
                longitude: origin_long
            },
            destination: {
                latitude: destination_lat,
                longitude: destination_long
            }
          }
          ], {strokeWidth: 2});
    };

这确实有效，但它只绘制最后一个（来自循环），因为它在绘制下一个之前破坏了以前的弧。我只是不知道如何在 map.arc() 中进行迭代。我希望循环返回如下内容：

        map.arc([
          {
            origin: {
                latitude: 43.445,
                longitude: 83.435345
            },
            destination: {
                latitude: 324.2323,
                longitude: -6
            }
          }, 
          {
            origin: {
                latitude: -53.445,
                longitude: 333.4345
            },
            destination: {
                latitude: -24.2323,
                longitude: 46.454
            }
          }, 
          {
            origin: {
                latitude: 53.045,
                longitude: 663.4345
            },
            destination: {
                latitude: -94.2323,
                longitude: 996.4454
            }
          }
          ], {strokeWidth: 2});

除了循环之外的任何其他方式也值得赞赏，我只是希望它以这种方式工作。谢谢！

【问题讨论】：

标签： javascript jquery json dictionary d3.js

【解决方案1】：

您正在覆盖循环中的值。请先尝试将每个坐标推入临时数组，然后将临时数组分配给 map arc 尝试类似：

 var temp = []
 for (var i = 0; i < data.length; i++) {

  var origin_long  = data[i][0][0]; 
  var origin_lat   = data[i][0][1]; 

  var destination_long = data[i][1][0]; 
  var destination_lat  = data[i][1][1]; 

   var prepare  = 
        {origin: {
            latitude: origin_lat,
            longitude: origin_long
        },
        destination: {
            latitude: destination_lat,
            longitude: destination_long

      }};
  temp.push(prepare);
};

map.arc(temp,{strokeWidth: 2})

【讨论】：