Coder Social home page Coder Social logo

Rename "map" to "datum". about d3 HOT 12 CLOSED

mbostock avatar mbostock commented on December 13, 2024
Rename "map" to "datum".

from d3.

Comments (12)

jasondavies avatar jasondavies commented on December 13, 2024

So would data(null) have the same effect as data([]), or would it just remove __data__ from all nodes in the current selection?

from d3.

mbostock avatar mbostock commented on December 13, 2024

/cc @shawnbot

from d3.

mbostock avatar mbostock commented on December 13, 2024

See also #470.

The main design concern that is stalling this issue is the return value of data(). There are three options:

  1. Returns the first non-null element's data.
  2. Returns the first group's array of data.
  3. Returns a two-dimensional array of data, matching the selection.

I think the most consistent approach, based on the behavior of D3's other methods, is # 2. You might be thinking that # 1 is the most consistent approach, but consider: when set a value via attr, you specify the string value for a single node (perhaps a function, but you're still returning a single value); when you get a value, you get back a single value. Therefore, since the data method takes an array, or function that returns an array, it should similarly return an array of data. # 2 also has the nice behavior that d3.selectAll("p").data() returns a one-dimensional array, which is probably a common use-case.

The downside of # 2 is that there's no way to get the data from the other groups when you have a hierarchical selection, such as d3.selectAll("ul").selectAll("li").data(). However, you could get that by manually iterating over the elements, or using Array.map.

from d3.

mbostock avatar mbostock commented on December 13, 2024

I think there's a related issue that D3 overrides the behavior of array.map, introducing its own method. That's an interesting point. I think in the 3.0 release, it might make more sense to rename map to datum. Furthermore, that would allow datum() to behave the same as # 1 in the previous comment, if you wanted to get or set the data for a single element. Hence, d3.selectAll("p").datum() would return the first non-null element's datum.

from d3.

mbostock avatar mbostock commented on December 13, 2024

BTW, I will also point out that you can all array.map on a selection's sub-arrays. For example:

var table = d3.select("table"),
    columns = table.selectAll("thead th")[0].map(function() { return this.textContent; });

from d3.

shawnbot avatar shawnbot commented on December 13, 2024

I vote 2. jQuery.data() behaves more like option 1, but I don't think it's comparable because d3's setter behaves so differently. You can get the behavior of option 3 like this, right?

d3.selectAll("ul").selectAll("li").map(function(d, i) {
  return d3.select(this).data();
});

from d3.

mbostock avatar mbostock commented on December 13, 2024

Cool, agreement! Close; replace d3.select(this) with d3.selectAll(d), assuming you're calling array.map.

from d3.

shawnbot avatar shawnbot commented on December 13, 2024

Der, yeah, thanks. Looking forward to using this!

from d3.

shawnbot avatar shawnbot commented on December 13, 2024

FWIW, I wrote a little demo of how this could work with data mapped from the DOM. There's a bit that patches d3.selection.prototype to make it work the "right" way for my purposes, but is this what you were thinking?

if (d3.version < "3.0") {
  d3.selection.prototype.data = d3.selection.prototype.map;
  d3.selection.prototype.map = function(map) {
    var out = [];
    this.each(function(d, i) {
      out.push(map.call(this, d, i));
    });
    return out;
  };
}

In other words:

  1. selection.data(function) binds data
  2. selection.data() returns an array of bound data
  3. selection.datum() returns the first bound datum
  4. selection.map(function) return an array of mapped data

Or have I gotten it completely wrong?

from d3.

mbostock avatar mbostock commented on December 13, 2024
  1. Yes.
  2. Yes; the array of data for the first group in the selection. For a flat selection, you'll get all the data.
  3. Yes; for the first non-null node. datum(object) or datum(function) can also be used to set the data associated with each selected element, but will not compute a data-join. datum(null) can be used to clear the data associated with selected elements, as well.
  4. I'm not totally sure what we should do with map. On the one hand, I'm tempted to leave it as an alias for datum for backwards-compatibility, which would mean we could include this functionality in 2.8 rather than waiting until 3.0. On the other hand, I'm tempted to remove it completely for the sake of parsimony, which would cause it to fall back to the default array.map implementation. (We could do this in two releases, also.) A third option would be to make map an alias for data().map(function), which would return an array of mapped data. However, given that you can achieve this by calling data().map(function) already, I don't see a strong need to provide this convenience function, and I'd rather keep the API lean.

from d3.

shawnbot avatar shawnbot commented on December 13, 2024

Great, thanks. The only thing that I like about map() being part of the API is that it provides access to the DOM nodes via this, which you don't get with data().map(function). I can think of a lot of cases where it's useful to operate on data while maintaining a link back to the DOM node to which it's bound.

from d3.

mbostock avatar mbostock commented on December 13, 2024

This appears to be fixed in 3.0.

from d3.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.