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

问题是您在data-legend之后设置了.transition属性。这意味着D3尝试将属性的值从null转换为Energy，无法执行此操作并最终仅在转换长度之后设置值。这意味着 bars 在d3.legend.js运行时没有此属性，因此，它们不适用于图例。

在开始转换之前移动属性设置可以解决问题：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)
    });

d3js酒吧没有出现在Legend上

1 个答案: