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

我对java脚本和D3很新。我从在线挑选d3.geo.mercator代码，并使用一个.csv文件根据经度和纬度显示员工和客户。我的老板想要选择分开选择员工或客户。我做了一个HTML如下面重定向到不同的HTML文件具有相同的代码，但不同的.CSV文件，但当员工选项被点击时，我得到错误“属性CX：预计长度，”NaN“。D3js。基于onclick建议选择不同的.CSV文件d3.geo.mercator

<!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>

来源

2017-02-17 user7581262

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

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

呈现所有数据，但选择性地隐藏/显示元素（例如，通过使用类名来确定应显示哪些数据）。
按需加载特定的csv文件并显示它（通过删除以前的数据并重画或通过更新绘制的数据点）。

这两种方法可以通过传递到a）应显示的类的名称，或者一个功能被触发b）该CSV保持所期望的数据的名称。

我已经放在一起的两个例子，显示了这可能是如何工作的上述两个选项。

首先绘制所有特征，然后切换按钮可见的内容：here。

说明：一旦在CSV文件中的所有内容都被绘制完毕，那么我们需要做的就是为每个按钮分配一个事件侦听器，以便在点击时将该按钮的ID传递给隐藏所有没有与按钮ID相同的类类型。

为了表现出色，我没有使用每个数据点的可见性属性进行播放，而是在需要消失时将特征的半径更改为零，并在显示时使用转换来做相反的操作他们也是如此。

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

说明：绘制一个CSV马上文件。为每个按钮分配一个事件监听器，这样在点击时，按钮的id（本例中的文件名）将被传递给更新函数。更新功能通过对数据进行输入，更新和退出转换（淡出不需要的数据点，将点转移到新位置并根据需要添加新数据点）来绘制选定的CSV。

的替代第二个选项的实现是简单地删除所有以前的数据点，就好像您绘制它首次画出所需的CSV数据。

来源

2017-02-19 05:04:56

嗨安德鲁非常感谢您解决我提到的问题。您的可视化效果与原始视图不同，不会显示美国状态，在地图上缩放和移动地图的灵活性。我会比较我的旧代码，并尝试更改您提供的代码以获取该功能。我感谢您花时间回答。感谢你和Stackoverflow帮助我连接到像你这样的专家。 – user7581262

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

回答

相关问题