D3js。 Select 不同的 .CSV 文件基于 d3.geo.mercator 上的 onclick 建议

Question

我是 java 脚本和 D3 的新手。我从网上挑选了 d3.geo.mercator 代码，并使用单个 .csv 文件根据纬度和经度显示员工和客户。我的老板想要 select 员工或客户分别选择。我做了如下 html 以重定向到具有相同代码但不同 .csv 文件的不同 html 文件，但是当单击员工选项时，我收到错误 "attribute cx: Expected length, "NaN"。"

<!DOCTYPE html>
<html>
  <head>
    <meta charset="ISO-8859-1">
    <title>MyCompany</Title>
  </head>

  <body>
    <form action="">
      <h2>Select Your Choice..</h2>
      <input type="button" value="Customers" onclick="window.location.href='Customers.html';">
      <input type="button" value="Employees" onclick="window.location.href='Employees.html';">
    </form>
  </body>
</html>

由于两者的 D3 代码相同，而不是使用两个 .html 文件，我希望根据 selected 选项选择 .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>

Answer 1

我理解的目标是让一个页面和一个脚本允许用户显示来自 2 个（或任意）个 csv 文件之一的数据。

有两种主要方法可以实现您的目标。

选择性地呈现除 hide/show 元素之外的所有数据（例如，通过使用 class 名称来标识应显示的数据）。
按需加载特定的 csv 文件并显示它（通过删除以前的数据并重新绘制或更新绘制的数据点）。

这两种方法都可以由一个函数触发，该函数传递 a) 应显示的 class 的名称或 b) 包含所需数据的 csv 的名称。

我将两个示例放在一起，展示了这对上述两个选项的工作原理。

先绘制所有要素，然后使用按钮切换可见内容：here。

说明：一旦绘制了两个 CSV 文件中的所有内容，那么我们需要做的就是为每个按钮分配一个事件侦听器，以便在单击时将按钮的 ID 传递给更新函数，该函数隐藏所有未显示的内容class 类型等于按钮的 ID。

为了炫耀，我没有玩弄每个数据点的可见性属性，而是在需要消失时通过过渡将要素的半径更改为零，并使用过渡到显示它们时也做相反的事情。

先只绘制一组特征，然后根据需要加载每个 CSV 文件：here

说明：马上绘制一个CSV文件。为每个按钮分配一个事件侦听器，以便在单击时将按钮的 ID（在本例中为文件名）传递给更新函数。 update 函数通过对数据执行进入、更新和退出转换（淡出不需要的数据点、将点转换到新位置以及根据需要添加新数据点）来绘制所选的 CSV。

第二个选项实现的替代方法是简单地删除所有以前的数据点，并绘制所需的 csv 数据，就好像您是第一次绘制它一样。

D3js。 Select 不同的 .CSV 文件基于 d3.geo.mercator 上的 onclick 建议

D3js. Select different .CSV file based on onclick suggestion on d3.geo.mercator

dictionary

geojson

mercator

d3.js