javascript - d3js Bars 没有出现在 Legend 上

Question

你能帮我理解为什么图例上没有出现条形图，而线条出现了。我在检查中没有发现任何错误。

JSFiddle here.我正在使用 d3.legend.js(JSFiddle 中代码窗口的底部，代码如下)

// 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

问题是您在 .transition 之后设置了 data-legend 属性。这意味着 D3 尝试将属性值从 null 转换为 Energy，但失败了，最终仅在转换长度后设置值。这意味着当 d3.legend.js 运行时，bars 没有这个属性，因此，它们不会被选为图例。

在开始转换前移动属性设置修复了问题:Demo .

改变:

   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)
    });