D3JS.根据d3.geo.mercator上的onClick建议选择不同的.csv文件

我是Java脚本和D3的新手。我从Online选择了D3.GEO.Mercator代码，并使用一个.csv文件根据纬度和经度向员工和客户展示。我的老板希望有一个选项来分别选择员工或客户。我制作了一个HTML作为BelOWS，将具有相同代码但.CSV文件的不同HTML文件重定向，但是当单击员工选项时，我会获得错误"属性CX：预期长度，" 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文件，因此我希望根据所选选项选择.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>

我知道的目标是拥有一个带有一个脚本的页面允许用户从2个（或任何）CSV文件中显示数据。

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

渲染所有数据，但选择性地隐藏/显示元素（例如，使用类名称标识应显示哪些数据）。
按需加载特定的CSV文件并显示（通过删除先前的数据并重新绘制或通过更新绘制的数据点）。

这两种方法都可以由一个传递A）应显示的类名的一个函数触发，或者b）持有所需数据的CSV名称。

我汇总了两个示例，这些示例显示了这可能适用于上面的两个选项。

首先绘制所有功能，然后切换按钮可见的内容：

说明：绘制了两个CSV文件中的所有内容，我们需要做的就是将事件侦听器分配给每个按钮，以便在单击时，该按钮的ID将传递给隐藏所有不掩盖所有内容的更新功能具有等于按钮的ID的类类型。

要亮相，而不是使用每个数据点的可见性属性，而是在需要消失时将功能半径更改为零，并在过渡时使用过渡来做相反也向他们展示。

首先仅绘制一组功能，然后根据需要加载每个CSV文件：此处

说明：立即绘制CSV文件。将事件侦听器分配给每个按钮，以便在单击时将按钮的ID（在这种情况下为文件名）传递给更新功能。更新功能通过进行数据来绘制所选的CSV，以进行数据（逐渐淡出不需要的数据点，将点过渡到新位置，并根据需要添加新的数据点）。

第二个选项实现的替代方法是简单地删除所有先前的数据点，然后绘制所需的CSV数据，就好像您是第一次绘制的。

相关内容

最新更新

热门标签：