CODEWITHSUNDEEP
javascriptarraysobjectd3.jsproperties
auto
auto

Reputation: 1163

How to get key of array or property value

Using D3, is it possible to find the key of a particular value?

For example, let's say using the following array, I wanted to return redDelicious (really "Red Delicious") and I am using the value d.y:

[
  { year: "2006", redDelicious: "10", mcintosh: "15", oranges: "9", pears: "6" },
  { year: "2007", redDelicious: "12", mcintosh: "18", oranges: "9", pears: "4" },
  { year: "2008", redDelicious: "05", mcintosh: "20", oranges: "8", pears: "2" },
  { year: "2009", redDelicious: "01", mcintosh: "15", oranges: "5", pears: "4" },
  { year: "2010", redDelicious: "02", mcintosh: "10", oranges: "4", pears: "2" },
  { year: "2011", redDelicious: "03", mcintosh: "12", oranges: "6", pears: "3" },
  { year: "2016", redDelicious: "19", mcintosh: "17", oranges: "5", pears: "7" },
]

Also, is it possible to have multiple words in a key and still reference it in D3/JS? For example, let's say I wanted the key to be "Red Delicious" instead of "redDelicious"

  var data = [
      { year: "2006", red Delicious: "10", mcintosh: "15", oranges: "9", pears: "6" },
      { year: "2007", red Delicious: "12", mcintosh: "18", oranges: "9", pears: "4" },
      { year: "2008", red Delicious: "05", mcintosh: "20", oranges: "8", pears: "2" },
      { year: "2009", red Delicious: "01", mcintosh: "15", oranges: "5", pears: "4" },
      { year: "2010", red Delicious: "02", mcintosh: "10", oranges: "4", pears: "2" },
      { year: "2011", red Delicious: "03", mcintosh: "12", oranges: "6", pears: "3" },
      { year: "2016", red Delicious: "19", mcintosh: "17", oranges: "5", pears: "7" },
    ]

UPDATE: Here, the last line, I want to reference red Delicious, but it returns Apple: undefined. Here is a jsfiddle to show the issue I'm having (data comes up as "undefined" on mouseover).

var rect = groups.selectAll("rect")
      .data(function(d) { return d; })
      .enter()
      .append("rect")
      .attr("x", function(d) { return x(d.x); })
      .attr("y", function(d) { return y(d.y0 + d.y); })
      .attr("height", function(d) { return y(d.y0) - y(d.y0 + d.y); })
      .attr("width", x.rangeBand())
      .on("mouseover", function() { tooltip.style("display", null) })
      .on("mouseout", function() { tooltip.style("display", "none"); })
      .on("mousemove", function(d) {
        var xPosition = d3.mouse(this)[0] - 15;
        var yPosition = d3.mouse(this)[1] - 25;
        tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")");

        tooltip.select("text").text("Apple: "+d['red Delicious']);
      });

Ideally, I'd like to be able to also take the current value being charted and find its key (red Delicious) so that its something like 

.text(d.key+": "+d.y) // where d.key is the correct way to find d's key

Upvotes: 0

Views: 85

Answers (1)

elsherbini
elsherbini

Reputation: 1616

When you created your transformed dataset to pass to the d3.layout.stack() layout, you lost the information of the name of the fruit corresponding to each data point.

If you console.log(dataset) you'll see that it is an array of 4 arrays, one for each fruit, and each array is composed of objects representing the x and y values for the data point. You need to also keep track of the fruit:

var dataset = d3.layout.stack()(["red Delicious", "mcintosh", "oranges", "pears"].map(function(fruit) {
  return data.map(function(d) {
      return {x: parse(d.year), y: +d[fruit], "fruit":fruit};
  });
}));

That way later in your tooltip text, you can reference d['fruit']

Working fork of your fiddle: http://jsfiddle.net/j3qrd3z7/3/

Upvotes: 1

Related Questions