How to get key of array or property value Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of How to get key of array or property value without wasting too much if your time.

The question is published on by Tutorial Guruji team.

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

Answer

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/

We are here to answer your question about How to get key of array or property value - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji