Необходимо установить основной цвет для вспомогательной диаграммы c3 или сделать ее менее прозрачной, чем основная диаграмма

Question

Когда я использую вспомогательную диаграмму, одна проблема, с которой я сталкиваюсь при взаимодействии с пользователем, заключается в том, что основная диаграмма и вспомогательная диаграмма имеют одинаковую важность, я имею в виду один и тот же цвет и т. Д. Вместо этого я ожидаю, что вспомогательная диаграмма должна быть менее прозрачной или должна быть предоставлена возможность установить основной цвет для вспомогательной диаграммы. Является ли это возможным? Я не вижу никакой возможности установить основной цвет для вспомогательной диаграммы на странице документации. Любое руководство, пожалуйста...

Answer 1

Вам нужно будет оформить его вручную. Я не вижу, чтобы в C3 использовался какой-либо конкретный селектор, чтобы отличать подшарф от основной диаграммы, поэтому для этого вам может понадобиться n-й дочерний элемент. Нечто подобное в примере кода ниже.

var chart = c3.generate({
    data: {
        columns: [
            ['sample', 30, 200, 100, 400, 150, 250]
        ]
    },
    subchart: {
        show: true
    }
});

d3.selectAll("svg > g:nth-child(3)").insert("rect", ":first-child").attr("width", "100%").attr("height", "100%").attr("fill", "yellow");

<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id='chart' />