D3：使用.datum（）后访问绑定数据

Question

在使用.datum（）

后，我无法弄清楚如何使用绑定数据添加title元素

当调用.datum（）时，'d'包含所有预期的属性，但在调用.datum（）之后，后续尝试访问属性失败...'d'仅包含路径：

var oc = og.selectAll('.oc-circle')
   .data(function(d) { return [d]; }, get_key);

oc.enter()
   .append('path')
   .attr({ 'class': 'occ oc-circle' });

oc.exit().remove();

oc
   .datum(function(d) {
      console.log(d);
      // d has all of its properties
      // Object {type: "Feature", properties: Object, geometry: Object, id: "nn00564043"}
      return circle
          .origin([d.geometry.coordinates[0], d.geometry.coordinates[1]])
          .angle(.5)();
   })
   .style({ 
      "fill" : 'red',
      'opacity': 0.75,
   })
   .attr("d", geoPath)
   .append('title')
   .text(function(d) {
      console.log(d);
      // d only contains path data
      // Object {type: "Polygon", coordinates: Array[1]}
      // return 'Magnitue ' + d.properties.mag + ' ' + d.properties.place;
   })

上面的内联注释显示调用.datum（）

后可以访问的内容

我错过了什么？

谢谢！

Answer 1

马克的建议是正确的。在这个小提琴的帮助下：http://jsfiddle.net/Lg9z57g5/我提出了以下内容，包括使用 d3.geo.circle（）或 path.pointRadius（）<绘制圆圈的功能/强>

var pointPath = function(d, r) {
   var coords = [d.geometry.coordinates[0], d.geometry.coordinates[1]];
   var pr = geoPath.pointRadius(globe.scale() / 100 * 1.5);
   return pr({
      type: "Point",
      coordinates: coords
   })
}

var circlePath = function(d) {
   var circle = d3.geo.circle();
   var coords = [d.geometry.coordinates[0], d.geometry.coordinates[1]];
   var cc = circle.origin(coords).angle(.5)();
   return geoPath(cc);
}

var oc = og.selectAll('.oc-circle')
    .data(function(d) { return [d]; }, get_key);

oc.enter()
    .append('path')
    .attr({ 'class': 'occ oc-circle' });

oc.exit().remove();

oc
    .attr("d", pointPath)
    .style({ 
         'fill' : 'red',
         'opacity': 0.75,
     })
     .append('title')
     .text(function(d) {
         return 'Magnitue ' + d.properties.mag + ' ' + d.properties.place;
     })

我的情况中更大的问题是reDraw（）函数，基本上是：

 surface.selectAll("path").attr("d", d3.geo.path().projection(projection));

这预计绑定到路径的所有数据都包含 d.geometry.coordinates

我不得不添加这一行：

surface.selectAll('.occ').attr('d', pointPath)

我了解到在追加“路径”时使用d3时，如果绑定数据的路径格式正确，则无需添加 .attr（＆＃39; d＆＃39;路径）。

Answer 2

您的.datum来电正在回复

return circle
  .origin([d.geometry.coordinates[0], d.geometry.coordinates[1]])
  .angle(.5)();

这是一个路径，这是数据绑定的，而不是d。

我确定你根本不需要datum电话：

oc
   .style({ 
      "fill" : 'red',
      'opacity': 0.75,
   })
   .attr("d", function(d){
     return geopath(circle
      .origin([d.geometry.coordinates[0], d.geometry.coordinates[1]])
      .angle(.5)());
   })
   .append('title')
   .text(function(d) {
      console.log(d);
      // d only contains path data
      // Object {type: "Polygon", coordinates: Array[1]}
      // return 'Magnitue ' + d.properties.mag + ' ' + d.properties.place;
   })