在任何图表中更改弧线颜色和值

Question

I am trying to create sunburst chart in d3.js. What I want is if the value is positive I should get green arc. and when the the value is negative the arc should be red. Another issue I am facing is whenever I enter negative value that arc/slice just hide. I also want to show my that slice with negative value.

    <style>
    html,
    body,
    #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        background: #562F34;
        background: #33573D;
    }
</style>

<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-sunburst.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-data-adapter.min.js"></script>

<div id="container"></div>

<script>
file2 = [
    {
        "name": "KES100",
        "fill": "#33573D",
        "children": [
            {
                "name": "TEXTILE",
                "id": "textileId",
                "children": [
                    {
                        "continent": "textileId",
                        "name": "COST",
                        "value": "10",
                        "points": "30"
                    },
                    {
                        "continent": "textileId",
                        "name": "COOT",
                        "value": "10",
                        "points": "30"
                    },
                    {
                        "continent": "textileId",
                        "name": "AHTM",
                        "value": "10",
                        "points": "30"
                    }
                ]
            },
            {
                "name": "OIL",
                "id": "oilId",
                "children": [
                    {
                        "continent": "oilId",
                        "name": "PSO",
                        "value": "20"
                    },
                    {
                        "continent": "oilId",
                        "name": "BYCO",
                        "value": "20"
                    },
                    {
                        "continent": "oilId",
                        "name": "MPCL",
                        "value": "10"
                    }
                ]
            }
        ]
    }
]
    anychart.onDocumentReady(function () {
        anychart.data.loadJsonFile('file2.json',
            function (data) {
                var color1 = [255, 0, 0];
                var color2 = [0, 0, 255];

                anychart.color.blend(color1, color2, 0.2);

                var chart = anychart.sunburst(data, "as-tree");

                chart.calculationMode("parent-independent");

                chart.labels().format('{%Name}\n{%Value}');
                console.log(chart.labels())

                chart.tooltip().format('{%Name}:{%Value}');

                chart.container("container");

                chart.draw();

            });
    });



</script>

Answer 1

The "value" should always be positive as it affects the size of the node directly. You can provide negative values in the data and then preprocess it. Copy the positive/negative value to another custom field of the item data, and leave the absolute value in the "value" field. Then you can apply condition coloring by a callback function in fill() chart method. For details, check the sample based on your snippet .