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

回答

相關問題