D3.js和jQuery - 多個地圖點和點擊事件

Question

我是D3.js的新手，我被要求接管其他人在工作中開始的項目。

目標是有一個地圖，爲點拉入json數據，然後當點擊點時，jQuery對話框會彈出每個點都有正確的json數據。

我已經能夠讓jQuery彈出窗口在地圖上工作，但是每一個被點擊的點都使用完全相同的文本填充。

我還測試了使用$ .getJSON在一個簡單的html頁面中加載和顯示json數據，並且我能夠通過所有json數據來獲得循環。

下面是創建點的功能：

function addCirclesForArray(element,index,array) { 
    var coordinates = 
    projection([element.sendLocation.longitude,element.sendLocation.latitude]); 
    g.append("circle") 
    .attr("cx",coordinates[0]) 
    .attr("cy",coordinates[1]) 
    .attr("r",(index<array.length-1)?2:4) 
    .attr("r",4) 
    .style("fill",$colorScale(d3.round(element.profileReadings[0].psal))) 
    .attr("class","circle") 
    g.selectAll("circle") 
    .on("click",circleClicked) 
} 

這裏是我通過了jQuery的彈出窗口的JSON數據循環方法：

function circleClicked(data, i) {  
    console.log(data) // undefined 
    console.log(i); // index # 
    $.getJSON("data/oc-readings3.json", function(data){ 
     $.each(data, function(key, value){ 
      //populate jQuery dialog 
      $('#floatID').text("Float ID: "+value.platformNumber); 
      $('#latitude').text("Latitude: "+value.sendLocation.latitude); 
      $('#longitude').text("Longitude: "+value.sendLocation.longitude); 

      // jQuery UI dialog and tabs 
      $("#tabs").tabs(); 
      $("#dialog").dialog({ width: 400 })  

     });     
    });     
} 

我可能失去了一些東西簡單在getJSON方法中使用循環，或者它可能與未定義的數據有關。如果您有任何提示，請告訴我。謝謝。

UPDATE /解決方案 我意識到，我並不需要使用$ .getJSON，因爲我已經在addCirclesForArray方法獲取JSON數據。我可以使用傳入的數組參數中的索引。

我也擺脫了circleClicked方法，並將新的邏輯添加到addCirclesForArray方法中。

g.selectAll("circle") 
    .on("mouseover", increaseSize) 
    .on("mouseout", decreaseSize) 
    .on("click", function(d,i) { 
    //console.log(array[i]); 
    //jQuery popup 
    $("#tabs").tabs(); 
    $("#dialog").dialog({ 
     width: 418, 
     resizable: false 
     });   
    //populate tabs 
    $('#floatID').text("Float ID: "+array[i].platformNumber); 
    // etc. 

Answer 1

當你使用D3的selection.on（類型，回調）綁定（點擊，鼠標懸停等）的處理程序，您的回調函數被調用它的上下文（ 「本」）約束到被點擊的DOM節點，以及元素的數據作爲它的第一個參數。 爲了使其發揮作用，您需要先將數據綁定到D3創建的DOM/SVG節點。

我推薦使用聲明性數據綁定，而不是循環遍歷數據元素。 D3的創建者Mike Bostock提供了a general overview on declarative binding in d3（「連接」）以及thorough, technical explanation。

至於對話框，其基本思想是隻定義一個對話框/彈出菜單/工具提示，這個對話框最初是隱藏的，並且被每個被點擊的節點重用。從回調函數中，您可以將對話框中的佔位符字段替換爲數據對象中的實際值。

您的例子或許可以被修改爲如下所示：

var containerElement = $('#container'), 
    svg = d3.select(containerElement).append('svg') 
      /* .attr('width', ...).attr('height',...)*/; 

// jQuery UI dialog and tabs 
$("#tabs").tabs(); 
$("#dialog").dialog({ width: 400 }); 

$.getJSON("data/oc-readings3.json", addCirclesForArray); 

/** called only once */ 
function addCirclesForArray(data) { 
    var coordinates = []; 
    $.each(data, function(key, value){ 
     coordinates.push(projection([value.sendLocation.longitude, value.sendLocation.latitude])); 
    }); 

    // data join/declarative binding 
    // caution: binding requires an array of array(s)! 
    var groups = svg.selectAll('g').data([data]); 

    // exit 
    groups.exit().remove(); 

    // enter 
    groups.enter().append("svg:circle"); 

    // enter + update 
    groups.attr("cx",coordinates[0]) 
     .attr("cy",coordinates[1]) 
     .attr("r", function(d,index) { 
      return (index<array.length-1)? 2: 4; 
     }) 
     //.attr("r", 4) // duplicate assignment of r 
     .style("fill", function(d) { 
      return $colorScale(d3.round(d.profileReadings[0].psal)); 
     }) 
     .attr("class","circle"); 
    groups.selectAll("circle") 
     .on("click", circleClicked); // :TODO: bind circleClicked to your preferred context 
} 

/** 
* @param {arrayElement} data 
* @this {svg:circle} 
*/ 
function circleClicked(data) { 
    var dialog = $('dialogPlaceholder'); 
    $('#floatID', dialog).text("Float ID: " + data.platformNumber); 
    $('#latitude', dialog).text("Latitude: " + data.sendLocation.latitude); 
    $('#longitude', dialog).text("Longitude: " + data.sendLocation.longitude); 
}