D3：使用 .datum() 后访问绑定数据

Question

在使用 .datum() 后，我无法弄清楚如何添加带有绑定数据的标题元素

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

上面的内联 cmets 显示了调用 .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('d', path)。

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