0

我正在使用 Wasil C3 angularjs 指令（http://wasil.org/angularjs-directive-for-c3-js-tutorial），并且还有一个通过编译的示例 plunker（http://plnkr.co/edit/wiiUMk2KoHHrK4D1HdNu? p=预览）。由于需要设置子图表的背景颜色，我正在尝试创建一个自定义属性指令（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");
                 }
             }

         }]);
4

2 回答 2

2

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

由于我不太了解角度，也不知道事件/绑定的时间安排是如何工作的，所以我习惯于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

于 2015-06-07T18:38:07.680 回答
1

我不确定我是否正确理解“子图表”是什么意思，而且我不是 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");

  1. 请注意我添加的.bgRect类。它旨在识别您要添加的矩形，以便能够删除（）它并再次重新添加。我这样做了，因为如果您只是多次调用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 -->

  2. 我已经更改了 CSS 选择器，因为您的选择器是在适当的位置插入矩形元素，它永远不可见。

第二种方式

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

通过直接访问图表区域并简单地使用d3更改它的 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()带有更具体的选择器。在页面上使用多个图表时可能会有所帮助。

希望能帮助到你。

于 2015-06-07T07:24:58.040 回答