需要为 c3 子图设置背景颜色或使其比主图不透明答案

【问题标题】：need to set back ground color for c3 sub chart or make it less transparent than main chart需要为 c3 子图设置背景颜色或使其比主图不透明
【发布时间】：2015-08-10 14:09:55
【问题描述】：

当我使用子图表时，我在用户体验方面面临的一个问题是主图表和子图表具有相同的重要性，我的意思是相同的颜色等相反我期望的是子图表应该不那么透明或者应该提供一个选项来设置子图表的背景颜色。可能吗？我在文档页面上看不到为子图表设置背景颜色的任何选项。任何指导请...

【问题讨论】：

标签： javascript css d3.js c3.js c3

【解决方案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' />

【讨论】：

不透明度工作正常，但是当我尝试使用上述解决方案设置背景颜色时，类似于 d3.selectAll("svg > g:nth-child(3)").style({"background -color": "yellow"})，它不起作用。对此的任何修复，设置背景颜色。
你不能为 g 元素的背景设置样式，但是如果你插入一个 rect 然后着色，它应该可以工作。片段已更新。
能否请您帮助使用 Angularjs 指令。请在stackoverflow.com/questions/30665391/…查看我的帖子。