Dictionary D3js。根据d3.geo.mercator上的onclick建议选择不同的.CSV文件

我对java脚本和D3非常陌生。我从网上选择了d3.geo.mercator代码，并使用单个.csv文件根据纬度和经度显示员工和客户。我的老板想要一个单独选择员工或客户的选项。 我制作了一个html如下重定向到不同的html文件，使用相同的代码，但不同的.csv文件，但当单击employee选项时，我得到错误“attribute cx:Expected length，”NaN“

我的公司
选择你的选择。。

由于D3代码对这两个文件都是相同的，而不是使用两个.html文件，因此我希望根据所选的选项选择.csv文件，我需要帮助才能做到这一点。谢谢你的帮助

<script>
var width = 960,
    height = 960;

var projection = d3.geo.mercator()
    .center([0, 5 ])
    .scale(200)
    .rotate([-180,0]);

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

var path = d3.geo.path()
    .projection(projection);

var g = svg.append("g");

// load and display the World
d3.json("world-110m2.json", function(error, topology) {

// load and display the cities
d3.csv("Customers.csv", function(error, data) {
    g.selectAll("circle")
       .data(data)
       .enter()
     .append("a")
                  .attr("xlink:href", function(d) {
                      return "https://www.google.com/search?q="+d.city;}
                  )
     .append("circle")
       .attr("cx", function(d) {
               return projection([d.lon, d.lat])[0];
       })
       .attr("cy", function(d) {
               return projection([d.lon, d.lat])[1];
       })
       .attr("r", 5)

     .style("fill", function(d) {        
            if (d.category == "Employee") {return "red"}  
            else if (d.category == "Office" ) {return "lawngreen"} // <== Right here 
            else { return "blue" }             
        ;}) 
    g.selectAll("text")
       .data(data)
       .enter()
     .append("text") // append text
       .attr("x", function(d) {
               return projection([d.lon, d.lat])[0];
       })
       .attr("y", function(d) {
               return projection([d.lon, d.lat])[1];
       })
       .attr("dy", -7) // set y position of bottom of text
      .style("fill", "black") // fill the text with the colour black
      .attr("text-anchor", "middle") // set anchor y justification

      .text(function(d) {return d.city;}); // define the text to display

});

g.selectAll("path")
      .data(topojson.object(topology, topology.objects.countries)
          .geometries)
    .enter()
      .append("path")
      .attr("d", path)
});

// zoom and pan
var zoom = d3.behavior.zoom()
    .on("zoom",function() {
        g.attr("transform","translate("+ 
            d3.event.translate.join(",")+")scale("+d3.event.scale+")");
        g.selectAll("circle")
            .attr("d", path.projection(projection));
        g.selectAll("path")  
            .attr("d", path.projection(projection)); 

  });

svg.call(zoom)

</script>

可变宽度=960，
高度=960；
var projection=d3.geo.mercator（）
.center（[0,5]）
.比例尺（200）
.旋转（[-180,0]）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var path=d3.geo.path（）
.投影（投影）；
var g=svg.append（“g”）；
//加载并显示世界
d3.json（“world-110m2.json”），函数（错误，拓扑）{
//加载并显示城市
d3.csv（“Customers.csv”），函数（错误、数据）{
g、 全选（“圆圈”）
.数据（数据）
.输入（）
.附加（“a”）
.attr（“xlink:href”，函数（d）{
返回“https://www.google.com/search?q=“+d.city；”
)
.附加（“圆圈”）
.attr（“cx”，功能（d）{
返回投影（[d.lon，d.lat]）[0]；
})
.attr（“cy”，函数（d）{
返回投影（[d.lon，d.lat]）[1]；
})
.attr（“r”，5）
.style（“填充”，函数（d）{
如果（d.category==“Employee”）{返回“red”}
否则，如果（d.category==“Office”）{return“lawngreen”}/我理解的目标是让一个页面和一个脚本允许用户显示来自2个（或任意）csv文件之一的数据

实现目标的主要方法有两种

呈现所有数据，但有选择地隐藏/显示元素（例如，通过使用类名标识应显示哪些数据）

按需加载特定csv文件并显示（通过删除以前的数据并重新绘制或更新绘制的数据点）

两种方法都可以由一个函数触发，该函数传递a）应显示的类的名称或b）保存所需数据的csv的名称

我把两个例子放在一起，展示了这对上面两个选项的作用

首先绘制所有要素，然后使用按钮切换可见内容：
说明：一旦绘制了两个CSV文件中的所有内容，那么我们需要做的就是为每个按钮分配一个事件侦听器，以便在单击时，将按钮的id传递给更新函数，该函数将隐藏所有类类型不等于按钮id的内容

为了炫耀，我没有使用每个数据点的可见性属性，而是在特征需要消失时使用过渡将其半径更改为零，并在显示它们时使用过渡来实现相反的效果

首先只绘制一组要素，然后根据需要加载每个CSV文件：
说明：立即绘制CSV文件。为每个按钮分配一个事件侦听器，以便在单击时，按钮的id（本例中为文件名）传递给更新函数。更新函数通过对数据执行输入、更新和退出转换来绘制所选CSV（淡出不需要的数据点，将点转换到新位置，并根据需要添加新数据点）

第二个选项实现的替代方案是简单地删除所有以前的数据点，并绘制所需的csv数据，就像您是第一次绘制它一样。
您好，安德鲁，非常感谢您解决了我提到的问题。您的可视化与原来的不同之处在于没有显示美国的状态、放大和ut的地图和移动地图的灵活性。我会比较我的旧代码，并尝试更改您提供的代码以获得该功能。我感谢您花时间回答。感谢您和Stackoverflow帮助我连接到像您这样的专家。
<script>
var width = 960,
    height = 960;

var projection = d3.geo.mercator()
    .center([0, 5 ])
    .scale(200)
    .rotate([-180,0]);

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

var path = d3.geo.path()
    .projection(projection);

var g = svg.append("g");

// load and display the World
d3.json("world-110m2.json", function(error, topology) {

// load and display the cities
d3.csv("Customers.csv", function(error, data) {
    g.selectAll("circle")
       .data(data)
       .enter()
     .append("a")
                  .attr("xlink:href", function(d) {
                      return "https://www.google.com/search?q="+d.city;}
                  )
     .append("circle")
       .attr("cx", function(d) {
               return projection([d.lon, d.lat])[0];
       })
       .attr("cy", function(d) {
               return projection([d.lon, d.lat])[1];
       })
       .attr("r", 5)

     .style("fill", function(d) {        
            if (d.category == "Employee") {return "red"}  
            else if (d.category == "Office" ) {return "lawngreen"} // <== Right here 
            else { return "blue" }             
        ;}) 
    g.selectAll("text")
       .data(data)
       .enter()
     .append("text") // append text
       .attr("x", function(d) {
               return projection([d.lon, d.lat])[0];
       })
       .attr("y", function(d) {
               return projection([d.lon, d.lat])[1];
       })
       .attr("dy", -7) // set y position of bottom of text
      .style("fill", "black") // fill the text with the colour black
      .attr("text-anchor", "middle") // set anchor y justification

      .text(function(d) {return d.city;}); // define the text to display

});

g.selectAll("path")
      .data(topojson.object(topology, topology.objects.countries)
          .geometries)
    .enter()
      .append("path")
      .attr("d", path)
});

// zoom and pan
var zoom = d3.behavior.zoom()
    .on("zoom",function() {
        g.attr("transform","translate("+ 
            d3.event.translate.join(",")+")scale("+d3.event.scale+")");
        g.selectAll("circle")
            .attr("d", path.projection(projection));
        g.selectAll("path")  
            .attr("d", path.projection(projection)); 

  });

svg.call(zoom)

</script>