D3：使用.datum（）之后访问绑定数据 [英] D3: Accessing bound data after using .datum()

问题描述

使用.datum（）后，我很难弄清楚如何添加具有绑定数据的标题元素

I'm having trouble figuring out how to add a title element with bound data after using .datum()

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

When .datum() is called 'd' contains all of the expected properties, but after calling .datum() subsequent attempts to access the properties fails... 'd' contains only the path:

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（）

The inline comments above show what is accessible after calling .datum()

我丢失了什么？

谢谢！

推荐答案

马克的建议是正确的。借助以下小提琴： http://jsfiddle.net/Lg9z57g5/ 我想到了以下内容：包括使用 d3.geo.circle（）或 path.pointRadius（）

Mark's suggestion was correct. With the help of this fiddle: http://jsfiddle.net/Lg9z57g5/ I came up with the following, including functions to draw circles using either d3.geo.circle() or 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（ ）函数，基本上是：

The bigger issue in my situation was the reDraw() function, which was basically:

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

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

this expected all data bound to paths to contain d.geometry.coordinates

我必须添加以下行：

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

我了解到，在添加' d3中的路径，如果绑定的数据已经是路径的正确格式，则不必添加 .attr（'d'，path）。

I learned that when appending a 'path' with d3 it is not necessary to add .attr('d', path) if the bound data is already in the correct format for path.

这篇关于D3：使用.datum（）之后访问绑定数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！