自定义属性类型指令设置c3图表的背景色

Question

我正在使用 Wasil C3 angularjs 指令 (http://wasil.org/angularjs-directive-for-c3-js-tutorial) and there is also a sample plunker through compilation (http://plnkr.co/edit/wiiUMk2KoHHrK4D1HdNu?p=preview)。由于需要设置子图表的背景颜色，我正在尝试创建一个自定义属性指令（subChartBgColor），这样我想在哪个图表上设置子图表的背景颜色我可以简单地把属性子Html 标签上的 -chart-bg-color，但有些它不起作用。谁能帮我修复我的 subChartBgColor 指令：

 (function() {
         angularDemo.directive('subChartBgColor', [function() {
             return {
                 restrict: 'A',
                 scope: false,
                 link: function(scope, element, attrs) {
                     d3.selectAll("svg > g:nth-child(3)").insert("rect", ":first-child").attr("width", "100%").attr("height", "100%").attr("fill", "yellow");
                 }
             }

         }]);

Answer 1

我不确定我是否理解正确 "subchart" 是什么意思而且我不是 C3/D3 图表方面的专家，但我不确定你是否可以更改背景特定系列的颜色，如果这就是您的意思。

但是...

如果您想更改整个图表的背景，您可以（至少）通过两种方式进行。

第一种方式

使用您的方法，但有一些小的改动。这将改变整个图表的背景，包括图例等：

d3.selectAll("svg > .bgRect").remove();d3.selectAll("svg").insert("rect", ":first-child").attr("class", "bgRect").attr("width", "100%").attr("height", "100%").attr("fill", "yellow");

请注意我添加的.bgRect class。它的目的是识别您要添加的矩形以便能够 remove() it and re-add again. I did it, because if you just call insert() 多次，您将始终看到插入的第一个矩形，因为在它之后添加的每个矩形都是 under/before 它在 HTML 中（前置），即

<!-- third one inserted -->
<rect class="bgRect" width="100%" height="100%" fill="red"></rect> 

<!-- second one inserted -->
<rect class="bgRect" width="100%" height="100%" fill="green"></rect>

<!-- first one inserted -->
<rect class="bgRect" width="100%" height="100%" fill="yellow"></rect>

<!-- some other code -->

我已经更改了 CSS 选择器，因为你的选择器是在适当的位置插入 rectangle 元素，它永远不会可见。

第二种方式

（这可能更接近您的需要，在我看来更合适的方法。）

通过直接访问图表区域并简单地使用 d3.style() 方法更改它的 CSS：

d3.selectAll("svg .c3-zoom-rect").style("fill", "yellow").style("opacity", 1);

您可以多次调用它，它不会改变 HTML 标记，同时会调整颜色。

实现此目的的另一种方法是使用 classed() adding/changing CSS class 并定义其颜色在常规 CSS 中，即 bg-red、bg-blue 等

最后的想法

考虑使用更具体的选择器更改 d3.selectAll() to d3.select()。在一页上使用多个图表时可能会有所帮助。

希望对您有所帮助。

Answer 2

首先，我对angular不熟悉。基本上，创建图表后，插入矩形，然后设置矩形背景颜色的样式。

由于我不太了解angular，也不知道事件/绑定的时间安排是如何工作的，所以我使用setTimeout等待图表创建, 在插入矩形之前。您需要将此代码移动到适当的指令中。

与另一个答案完全相同的代码：

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

参见： http://plnkr.co/edit/CBcIsW9QnHaeXicmwZk2?p=preview

自定义属性类型指令设置c3图表的背景色

custom attribute type directive to set the background color of c3 chart

angularjs

charts

angularjs-directive

c3.js

c3