2

我是 D3.js 的新手。我正在尝试在美国地图上可视化社交网络。它基本上包括 20 个塔和它们之间的连接。现在我可以在每个塔上画圆圈，但由于某种原因看不到路径（直线很好）。

我将代码附加到此消息中。您的帮助将不胜感激！

path 的数据是 csv 格式的，每行包括起点塔和目的地塔的 id、经度和纬度。

<!DOCTYPE html> 
<html> 
  <head> 
    <link type="text/css" rel="stylesheet" href="style.css"/> 
    <style type="text/css"> 
#states path { 
    fill: #ccc; 
    stroke: #fff; 
} 

path.arc { 
  pointer-events: none; 
  fill: none; 
  stroke: #fff; 
} 

path.cell { 
  fill: none; 
  pointer-events: all; 
} 

circle { 
  fill: steelblue; 
  fill-opacity: .8; 
  stroke: #fff; 
} 

 </style> 
  </head> 
  <body> 
    <script type="text/javascript" src="../../d3.v2.js"></script> 
    <script type="text/javascript" src="../../d3.csv.js"></script> 
    <script type="text/javascript" src="../../d3.geo.js"></script> 
    <script type="text/javascript" src="../../d3.geom.js"></script> 
    <script type="text/javascript"> 
var w = 1280, 
    h = 800; 
var projection = d3.geo.azimuthal() 
    .mode("equidistant") 
    .origin([-98, 38]) 
    .scale(1400) 
    .translate([640, 360]); 
var path = d3.geo.path() 
    .projection(projection); 
var svg = d3.select("body").insert("svg:svg", "h2") 
    .attr("width", w) 
    .attr("height", h); 
var states = svg.append("svg:g") 
    .attr("id", "states"); 
var circles = svg.append("svg:g") 
    .attr("id", "circles"); 
d3.json("../data/us-states.json", function(collection) { 
  states.selectAll("path") 
      .data(collection.features) 
      .enter().append("svg:path") 
      .attr("d", path); 
}); 

d3.csv("K_cdr.csv", function(callls) { 
var countByTower = {}, 
    locationByTower = {}, 
    positions = []; 
callls.forEach(function(calll) { 
var origin = calll.tower_orig, 
destination = calll.tower_dest; 
countByTower[origin] = (countByTower[origin] || 0) + 1; 
countByTower[destination] = (countByTower[destination] || 0) + 1; 
 }); 
d3.csv("K_Towers.csv", function(towers) { 
    var location = []; 
    towers.map(function(tower) { 
    location = [+tower.lat, +tower.lon]; 
    locationByTower[tower.ID] = location; 
    positions.push(projection(location)); 
    }); 
    circles.selectAll("circle") 
           .data(towers) 
           .enter().append("svg:circle") 
           .attr("cx", function(d, i) { return positions[i][0]; }) 
           .attr("cy", function(d, i) { return positions[i][1]; }) 
           .attr("r", function(d, i) { return 
    Math.sqrt(countByTower[d.ID])/2; }); 
    svg.selectAll("circle.node") 
       .data(towers) 
       .enter().append("svg:text") 
       .attr("class", "node") 
       .attr("x", function(d,i) { return positions[i][0]; }) 
       .attr("y", function(d,i) { return positions[i][1]; }) 
       .text(function(d,i) {return d.ID;}); 
    }); 

svg.selectAll("path") 
   .data(callls) 
   .enter().append("path") 
   .attr("d", function(d,i) { 
    var orig = projection([d.tower_orig_lat[i], 
    d.tower_orig_lon[i]]); 
    var dest = projection([d.tower_dest_lat[i], d.tower_dest_lon[i]]); 
    return ("M"+ orig[0]+" "+orig[1]+" L "+ dest[0] +" "+ dest[1] + " 
    z;"); }); 
}); 

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

0 回答 0