d3 join on object key within array

Question

My data looks like this:

[
   {
      name: "Joel Spolsky",
      values: [
                {
                   timestamp: 1380432214730,
                   value: 55
                },
                {
                   timestamp: 1380432215730,
                   value: 32
                },   
                {
                   timestamp: 1380432216730,
                   value: 2
                },   
                {
                   timestamp: 1380432217730,
                   value: 37
                },

                // etc
              ]     
    },
   {
      name: "Soul Jalopy",
      values: [
                {
                   timestamp: 1380432214730,
                   value: 35
                },
                {
                   timestamp: 1380432215730,
                   value: 72
                },   
                {
                   timestamp: 1380432216730,
                   value: 23
                },   
                {
                   timestamp: 1380432217730,
                   value: 3
                },

                // etc
              ]     
    },

    // and so on
]

I pass this data into d3.layout.stack so a y and y0 get added. I then draw this stacked layout.

When the data changes, I join the new data to the old.

I can join the groups on name like this:

var nameGroups = this.chartBody.selectAll(".nameGroup")
        .data(this.layers, function (d) {
                return d.name;
             });

But I'm having trouble joining the rectangles (or "bars") on timestamp. The best I can do (so far) is join them on the values key:

var rects = nameGroups.selectAll("rect")
        .data(function (d) {
                return d.values;
              });

How do I join this "inner data" on the timestamp key?

I've tried including the array index:

var rects = nameGroups.selectAll("rect")
        .data(function (d, i) {
                return d.values[i].timestamp;
              });

But that doesn't work because (I think) the timestamp is matched per array index. That is, the join isn't looking at all timestamp values for a match, just the one at that index.

UPDATE

Here is my complete update function:

updateChart: function (data) {
    var that = this,
        histogramContainer = d3.select(".histogram-container"),
        histogramContainerWidth = parseInt(histogramContainer.style('width'), 10),
        histogramContainerHeight = parseInt(histogramContainer.style('height'), 10),
        width = histogramContainerWidth,
        height = histogramContainerHeight,
        nameGroups, rects;

    /*
     FWIW, here's my stack function created within my
     init function:

     this.stack = d3.layout.stack()
         .values(function (d) { return d.values; })
         .x(function (dd) { return dd.timestamp; })
         .y(function (dd) { return dd.value; });

     */

    // save the new data
    this.layers = this.stack(data);

    // join the new data to the old via the "name" key
    nameGroups = this.chartBody.selectAll(".nameGroup")
        .data(this.layers, function (d, i) {
            return d.name;
        });

    // UPDATE
    nameGroups.transition()
        .duration(750);

    // ENTER
    nameGroups.enter().append("svg:g")
        .attr("class", "nameGroup")
        .style("fill", function(d,i) {
            //console.log("entering a namegroup: ", d.name);
            var color = (that.colors[d.name]) ?
                    that.colors[d.name].value :
                    Moonshadow.helpers.rw5(d.name);
            return "#" + color;
        });

    // EXIT
    nameGroups.exit()
        .transition()
        .duration(750)
        .style("fill-opacity", 1e-6)
        .remove();

    rects = nameGroups.selectAll("rect")
        .data(function (d) {

            // I think that this is where the change needs to happen

            return d.values;

        });

    // UPDATE
    rects.transition()
        .duration(750)
        .attr("x", function (d) {
            return that.xScale(d.timestamp);
        })
        .attr("y", function(d) {
            return -that.yScale(d.y0) - that.yScale(d.y);
        })
        .attr("width", this.barWidth)
        .attr("height", function(d) {
            return +that.yScale(d.y);
        });

    // ENTER 

    rects.enter().append("svg:rect")
        .attr("class", "stackedBar")
        .attr("x", function (d) {
            return that.xScale(d.timestamp); })
        .attr("y", function (d) {
            return -that.yScale(d.y0) - that.yScale(d.y); })
        .attr("width", this.barWidth)
        .attr("height",function (d) {
            return +that.yScale(d.y); })
        .style("fill-opacity", 1e-6)
        .transition()
        .duration(1250)
        .style("fill-opacity", 1);

    // EXIT

    rects.exit()
        .transition()
        .duration(750)
        .style("fill-opacity", 1e-6)
        .transition()
        .duration(750)
        .remove();
}

Hmm. Doesn't it need to be something like d.values[i].timestamp? So that it's joining each rect's timestamp and not just the first one? — ari gold
– ari gold, Commented Mar 18, 2014 at 18:26
Depends what you want to do. Could you show us the complete code please? I'm not quite sure where you're trying to do this matching. — Lars Kotthoff
– Lars Kotthoff, Commented Mar 18, 2014 at 18:38
Oh hang on, you're not actually passing a key function there. Try .data(function(d) { return d.values; }, function(d) { return d.timestamp; }). — Lars Kotthoff
– Lars Kotthoff, Commented Mar 18, 2014 at 19:49
Well the key function is the second argument and you were passing only one. I'll add it as an answer. — Lars Kotthoff
– Lars Kotthoff, Commented Mar 18, 2014 at 20:53

Lars Kotthoff · Accepted Answer · 2014-03-18 20:55:48Z

1

You're not actually passing a key function in your code. The key function is the optional second argument to .data() (see the documentation). So in your case, the code should be

.data(function(d) { return d.values; },
      function(d) { return d.timestamp; })

Here the first function tells D3 how to extract the values from the upper level of the nesting and the second how, for each item in the array extracted in the first argument, get the key.

answered Mar 18, 2014 at 20:55

Lars Kotthoff

109k16 gold badges210 silver badges210 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

d3 join on object key within array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related