javascript - 如何使用 Nv.d3.js 库将饼图置于顶部？

Question

我留下了使用前一位开发人员的 nv.d3.js 构建的数据可视化图表，我目前正在尝试编辑饼图以将饼图定位在顶部，将标签定位在底部。这是一个视觉示例的 fiddle 。

https://jsfiddle.net/kxrd2h7t/2/

我相信之前的开发者使用的nv.d3.js版本不同，我找到了饼图功能但不知道从哪里开始。

a.models.pieChart = function () {

        "use strict";

        function b(e) {
            return q.reset(), q.models(c), e.each(function (e) {
                var k = d3.select(this);
                a.utils.initSVG(k);
                var n = a.utils.availableWidth(g, k, f),
                    o = a.utils.availableHeight(h, k, f);
                if (b.update = function () {
                        k.transition().call(b)
                    }, b.container = this, l.setter(s(e), b.update).getter(r(e)).update(), l.disabled = e.map(function (a) {
                        return !!a.disabled
                    }), !m) {
                    var q;
                    m = {};
                    for (q in l) m[q] = l[q] instanceof Array ? l[q].slice(0) : l[q]
                }
                if (!e || !e.length) return a.utils.noData(b, k), b;
                k.selectAll(".nv-noData").remove();
                var t = k.selectAll("g.nv-wrap.nv-pieChart").data([e]),
                    u = t.enter().append("g").attr("class", "nvd3 nv-wrap nv-pieChart").append("g"),
                    v = t.select("g");
                if (u.append("g").attr("class", "nv-pieWrap"), u.append("g").attr("class", "nv-legendWrap"), i)
                    if ("top" === j) d.width(n).key(c.x()), t.select(".nv-legendWrap").datum(e).call(d), f.top != d.height() && (f.top = d.height(), o = a.utils.availableHeight(h, k, f)), t.select(".nv-legendWrap").attr("transform", "translate(0," + -f.top + ")");
                    else if ("right" === j) {
                    var w = a.models.legend().width();
                    w > n / 2 && (w = n / 2), d.height(o).key(c.x()), d.width(w), n -= d.width(), t.select(".nv-legendWrap").datum(e).call(d).attr("transform", "translate(" + n + ",0)")
                }
                t.attr("transform", "translate(" + f.left + "," + f.top + ")"), c.width(n).height(o);
                var x = v.select(".nv-pieWrap").datum([e]);
                d3.transition(x).call(c), d.dispatch.on("stateChange", function (a) {
                    for (var c in a) l[c] = a[c];
                    p.stateChange(l), b.update()
                }), p.on("changeState", function (a) {
                    "undefined" != typeof a.disabled && (e.forEach(function (b, c) {
                        b.disabled = a.disabled[c]
                    }), l.disabled = a.disabled), b.update()
                })
            }), q.renderEnd("pieChart immediate"), b
        }
        var c = a.models.pie(),
            d = a.models.legend(),
            e = a.models.tooltip(),
            f = {
                top: 30,
                right: 20,
                bottom: 20,
                left: 20
            },
            g = null,
            h = null,
            i = !0,
            j = "top",
            k = a.utils.defaultColor(),
            l = a.utils.state(),
            m = null,
            n = null,
            o = 250,
            p = d3.dispatch("tooltipShow", "tooltipHide", "stateChange", "changeState", "renderEnd");
        e.headerEnabled(!1).duration(0).valueFormatter(function (a, b) {
            return c.valueFormat()(a, b)
        });
        var q = a.utils.renderWatch(p),
            r = function (a) {
                return function () {
                    return {
                        active: a.map(function (a) {
                            return !a.disabled
                        })
                    }
                }
            },
            s = function (a) {
                return function (b) {
                    void 0 !== b.active && a.forEach(function (a, c) {
                        a.disabled = !b.active[c]
                    })
                }
            };
        return c.dispatch.on("elementMouseover.tooltip", function (a) {
            a.series = {
                key: b.x()(a.data),
                value: b.y()(a.data),
                color: a.color
            }, e.data(a).hidden(!1)
        }), c.dispatch.on("elementMouseout.tooltip", function () {
            e.hidden(!0)
        }), c.dispatch.on("elementMousemove.tooltip", function () {
            e.position({
                top: d3.event.pageY,
                left: d3.event.pageX
            })()
        }), b.legend = d, b.dispatch = p, b.pie = c, b.tooltip = e, b.options = a.utils.optionsFunc.bind(b), b._options = Object.create({}, {
            noData: {
                get: function () {
                    return n
                },
                set: function (a) {
                    n = a
                }
            },
            showLegend: {
                get: function () {
                    return i
                },
                set: function (a) {
                    i = a
                }
            },
            legendPosition: {
                get: function () {
                    return j
                },
                set: function (a) {
                    j = a
                }
            },
            defaultState: {
                get: function () {
                    return m
                },
                set: function (a) {
                    m = a
                }
            },
            tooltips: {
                get: function () {
                    return e.enabled()
                },
                set: function (b) {
                    a.deprecated("tooltips", "use chart.tooltip.enabled() instead"), e.enabled(!!b)
                }
            },
            tooltipContent: {
                get: function () {
                    return e.contentGenerator()
                },
                set: function (b) {
                    a.deprecated("tooltipContent", "use chart.tooltip.contentGenerator() instead"), e.contentGenerator(b)
                }
            },
            color: {
                get: function () {
                    return k
                },
                set: function (a) {
                    k = a, d.color(k), c.color(k)
                }
            },
            duration: {
                get: function () {
                    return o
                },
                set: function (a) {
                    o = a, q.reset(o)
                }
            },
            margin: {
                get: function () {
                    return f
                },
                set: function (a) {
                    f.top = void 0 !== a.top ? a.top : f.top, f.right = void 0 !== a.right ? a.right : f.right, f.bottom = void 0 !== a.bottom ? a.bottom : f.bottom, f.left = void 0 !== a.left ? a.left : f.left
                }
            }
        }), a.utils.inheritOptions(b, c), a.utils.initOptions(b), b
    }

有没有比编辑源代码更简单的实现方法？我用 css 做了几次尝试，但没有成功。

Answer 1

我找到了图例的类，这可能有点乱，但你明白了。

#chart svg {
    height: 400px;
    margin-top: -80px;
    margin-bottom: 80px;
}
.nv-label text {
    fill: rgb(255, 255, 255) !important;
}
section {
    width: 400px;
    margin: auto;
}
.nv-legendWrap {
    transform: translateY(300px);
}

几个变化。

示例:

https://jsfiddle.net/link2twenty/cevjuvd0/