I am trying a sunburst chart using d3(V4) & Vue2 to show the values of Sales, Salience, Goly% in a single chart.

working pen.

here is my JSON

{
    name: "root",
    children: [{
        name: "product1",
        children: [{
            name: "zone1",
            size: 45632,
            salience: 200,
            goly: 10,
        }, {
            name: "zone2",
            size: 986413,
            salience: 100,
            goly: 20,
        }, ],
    }, {
        name: "product2",
        children: [{
            name: "zone1",
            size: 54752,
            salience: 250,
            goly: 15,
        }, {
            name: "zone2",
            size: 973542,
            salience: 170,
            goly: 18,
        }, ],
    }, {
        name: "product3",
        children: [{
            name: "zone1",
            size: 671378,
            salience: 378,
            goly: 35,
        }, {
            name: "zone2",
            size: 12345,
            salience: 615,
            goly: 26,
        }, ],
    }, ]
};

size in above json denotes sales value.

i tried using eachBefore as mentioned here

root["salience"] = 1;
root.eachBefore(d => {
    if (d.parent) {
        let parent_salience = d.parent.salience;
        if (parent_salience === NaN) parent_salience = 0;
        d.salience = d.data.salience + parent_salience;
    };
});

but it didn't work either.

i even tried to alter the source code of sum function

Node.prototype = hierarchy.prototype = {
    constructor: Node,
    count: node_count,
    each: node_each,
    eachAfter: node_eachAfter,
    eachBefore: node_eachBefore,
    sum: node_sum,
    sum2: node_sum2, /* altered here */
    sort: node_sort,
    path: node_path,
    ancestors: node_ancestors,
    descendants: node_descendants,
    leaves: node_leaves,
    links: node_links,
    copy: node_copy
};

function node_sum2(value) {
    return this.eachAfter(function(node) {
        var obj = value(node.data);
        var sum = +obj.sales || 0,
            salience = +obj.salience || 0,
            goly = +obj.goly || 0,
            children = node.children,
            _children = node.data.children,
            i = children && children.length;

        while (--i >= 0) {
            sum += children[i].value;
            salience += children[i].salience;
            goly += children[i].goly;
        }

        node.value = sum;
        node.salience = salience;
        node.goly = goly;
    });
}

but i get the same result even if i use d3.sum2() instead of d3.sum