d3js Bars not appearing on Legend

Question

Can you help me understand why the Bars are not appearing on the legend, while the lines are. I get no errors in inspect.

JSFiddle here. I am using d3.legend.js (bottom of code window in JSFiddle, code below)

// d3.legend.js 
// (C) 2012 ziggy.jonsson.nyc@gmail.com
// MIT licence
(function () {
    d3.legend = function (g) {
        g.each(function () {
            var g = d3.select(this),
                items = {},
                svg = d3.select(g.property("nearestViewportElement")),
                legendPadding = g.attr("data-style-padding") || 5,
                lb = g.selectAll(".legend-box").data([true]),
                li = g.selectAll(".legend-items").data([true])

                lb.enter().append("rect").classed("legend-box", true)
                li.enter().append("g").classed("legend-items", true)

                svg.selectAll("[data-legend]").each(function () {
                    var self = d3.select(this)
                    items[self.attr("data-legend")] = {
                        pos: self.attr("data-legend-pos") || this.getBBox().y,
                        color: self.attr("data-legend-color") != undefined ? self.attr("data-legend-color") : self.style("fill") != 'none' ? self.style("fill") : self.style("stroke")
                    }
                })

                items = d3.entries(items).sort(function (a, b) {
                    return a.value.pos - b.value.pos
                })

                li.selectAll("text")
                    .data(items, function (d) {
                    return d.key
                })
                    .call(function (d) {
                    d.enter().append("text")
                })
                    .call(function (d) {
                    d.exit().remove()
                })
                    .attr("y", function (d, i) {
                    return i + "em"
                })
                    .attr("x", "1em")
                    .text(function (d) {;
                    return d.key
                })

                li.selectAll("circle")
                    .data(items, function (d) {
                    return d.key
                })
                    .call(function (d) {
                    d.enter().append("circle")
                })
                    .call(function (d) {
                    d.exit().remove()
                })
                    .attr("cy", function (d, i) {
                    return i - 0.25 + "em"
                })
                    .attr("cx", 0)
                    .attr("r", "0.4em")
                    .style("fill", function (d) {
                    return d.value.color
                })
                .on("click", function(d) {
                    var op = d.hidden ? 1 : 0;
                    if(d.key == "Cumulative Output") {
                        d3.select("path.CABLine").transition().attr("opacity", op);
                    } else {
                        d3.select("path.TGTLine").transition().attr("opacity", op);
                    }
                    d.hidden = !d.hidden;
                });

                // Reposition and resize the box
            var lbbox = li[0][0].getBBox()
            lb.attr("x", (lbbox.x - legendPadding))
                .attr("y", (lbbox.y - legendPadding))
                .attr("height", (lbbox.height + 2 * legendPadding))
                .attr("width", (lbbox.width + 2 * legendPadding))
        })
        return g
    }
})()

Answer 1

The problem is that you are setting the data-legend attribute after a .transition . That means that D3 tries to transition the value of the attribute from null to Energy , fails to do it and ends up merely setting the value after the length of the transition. This means that the bars do not have this attribute when d3.legend.js runs and, hence, they are not picked up for the legends.

Moving the setting of attribute before starting the transition fixes the problem: Demo .

Change:

   svg.append("g").attr("id", "bars").selectAll(".bar")
        .data(data)
        .enter().append("rect")
        .attr("data-legend", "Energy") // <-- Before the transition
        .on('mouseover', tip.show)
        .on('mouseout', tip.hide)
        .attr("class", "bar")
        .attr("x", function (d) {
        return x(d.xaxis);
    })
        .attr("width", x.rangeBand())
        .attr("y", function (d) {
        return yL(d.BarValue);
    })
        .transition().delay(function (d, i) {
        return i * 10;
    })
        .duration(10)
        .attr("height", function (d) {
        return height - yL(d.BarValue)
    });