Question

我正在使用Wasil C3 angularjs指令（http://wasil.org/angularjs-directive-for-c3-js-tutorial），并且还有一个通过编译（http://plnkr.co/edit/wiiUMk2KoHHrK4D1HdNu?p=preview）的示例plunker。由于需要设置子图表的背景颜色，我正在尝试创建一个自定义属性指令（subChartBgColor），以便在哪个图表上我想要设置子图表的底色我可以简单地将属性sub 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

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

由于我不太了解角度，并且我不知道事件/绑定的时间如何工作，我在插入矩形之前使用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

Answer 2

我不确定我是否正确理解了你的意思＆＃34; subchart＆＃34;而且我不是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 类。它旨在识别您要添加的矩形，以便能够 remove() 并再次重新添加。我做到了，因为如果您只是多次调用 insert() ，您将始终看到插入的第一个矩形，因为每次添加后都会在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选择器，因为你的矩形元素就位了，它不会被看见。

第二种方式

（可能更接近你需要的东西，在我看来更合适的方式。）

直接访问图表区域，只需使用 d3。style() 方法更改它的CSS：

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

您可以根据需要多次调用它，并且在调整颜色时不会改变HTML标记。

实现此目的的另一种方法是使用 classed() 向此元素添加/更改CSS类，并在常规CSS中定义它的颜色，即 bg-red ， bg-blue 等。

最后一个想法

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

希望它有所帮助。

自定义属性类型指令，用于设置c3图表

2 个答案: