Javascript D3.js和jQuery-多个映射点和单击事件

我是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) 
}

我可能在getJSON方法中缺少了一些简单的循环，或者可能与未定义的数据有关。如果你有什么建议，请告诉我。谢谢

更新/解决方案 我意识到我不需要使用$.getJSON，因为我已经在addCircleForArray方法中获得了json数据。我可以使用传入的数组参数中的索引

我还去掉了circleClicked方法，并将新逻辑添加到AddCircleForArray方法中

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.

使用d3的selection.ontype、callback绑定click、mouseover等处理程序时，将调用回调函数，并将其上下文绑定到被单击的DOM节点，元素的数据作为其第一个参数。 为了实现这一点，您需要首先将数据绑定到D3创建的DOM/SVG节点

我建议使用声明性数据绑定，而不是通过数据元素循环。D3的创建者迈克·博斯托克（Mike Bostock）提供了加入，以及

至于对话框，其基本思想是只定义一个对话框/弹出窗口/工具提示，该对话框/弹出窗口/工具提示最初是隐藏的，并对单击的每个节点重复使用。通过回调函数，可以将对话框中的占位符字段替换为数据对象中的实际值

您的示例可能会修改为如下所示：

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);
}

---

你将数据绑定到哪里？谢谢你的回复。我只是将数据绑定到jQuery对话框的html，而不是圆圈。也许这就是我的问题？我想是的，因为你是从圆圈的上下文调用点击事件的，但没有数据绑定到它们…在侦听器开始时未定义数据的原因。但我强烈建议你为你的示例生成一个…我不完全清楚你是如何组合的。谢谢你的代码重写，解释和链接。现在地图上没有点，弹出窗口也不能正常工作，所以我将按照FernOfTheAndes的建议进行一次完整的plunk，因为你们只看到了我代码的一部分。

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);
}