有没有办法替换 c3 中的区域？

Question

我正在设置一个图表，该图表基于用户输入（日期）使用新数据重新生成。添加区域时，它们不会替换或删除我需要它们执行的先前区域。

从 PHPStorm 运行。我试过 chart.regions.remove() 但没有删除任何内容。 chart.regions.add() 按预期工作。

chart.regions.remove(regionsArray);
resetRegions();
chart.regions.add(
    regionsArray
);

/*
Where chart is my chart, regionsArray is initially the array of current regions. resetRegions() assigns the correct wanted region values to regionsArray. After resetRegions() regionsArray only contains the wanted regions and not the old regions too.
*/

我希望图表仅显示新区域，但它同时显示新区域和旧区域。

Answer 1

您可以执行以下操作 - 首先，让我们调用 c3 来生成包含区域的图表：

var chart = c3.generate({
   bindto: '#c3_chart',
     data: {
       columns: [
         ['data1', 100, 200, 150, 300, 200],
         ['data2', 200, 150, 25, 250, 100],
       ],
     },
    regions: [
          {start: 0, end: 1, opacity:0.2},
          {start: 2, end: 3, opacity:0.2}
   ];
});

然后我们可以使用以下函数将旧区域替换为新区域（此处结合超时进行演示）：

var c3rgn = document.getElementById(".c3-region");  
setTimeout(function () {
  chart.regions.remove(c3rgn);
     chart.regions.add(
        [
          {start: 1, end: 2, opacity:0.2}
        ]
     );
}, 2000);

我为你创建了一个小提琴来测试这个：http://jsfiddle.net/vbn4tquz/

下面是完整的代码和可执行的sn-p：

var chart = c3.generate({
     bindto: '#c3_chart',
     data: {
       columns: [
         ['data1', 100, 200, 150, 300, 200],
         ['data2', 200, 150, 25, 250, 100],
       ],
     },
		regions: [
          {start: 0, end: 1, opacity:0.2},
          {start: 2, end: 3, opacity:0.2}
    ],
});

// This function replaces the old regions

var c3rgn = document.getElementById(".c3-region");  
setTimeout(function () {
  chart.regions.remove(c3rgn);
     chart.regions.add(
        [
          {start: 1, end: 2, opacity:0.2}
        ]
     );
}, 3500);

.c3 svg {
  font: 10px sans-serif
}

.c3 line,
.c3 path {
  fill: none;
  stroke: #000;
}

.c3 text {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none
}

.c3-bars path,
.c3-event-rect,
.c3-legend-item-tile,
.c3-xgrid-focus,
.c3-ygrid {
  shape-rendering: crispEdges
}

.c3-chart-arc path {
  stroke: #fff
}

.c3-chart-arc text {
  fill: #fff;
  font-size: 13px
}

.c3-grid line {
  stroke: #aaa
}

.c3-grid text {
  fill: #aaa
}

.c3-xgrid,
.c3-ygrid {
  stroke-dasharray: 3 3
}

.c3-text.c3-empty {
  fill: gray;
  font-size: 2em
}

.c3-line {
  stroke-width: 1px
}

.c3-circle._expanded_ {
  stroke-width: 1px;
  stroke: #fff
}

.c3-selected-circle {
  fill: #fff;
  stroke-width: 2px
}

.c3-bar {
  stroke-width: 0
}

.c3-bar._expanded_ {
  fill-opacity: .75
}

.c3-target.c3-focused {
  opacity: 1
}

.c3-target.c3-focused path.c3-line,
.c3-target.c3-focused path.c3-step {
  stroke-width: 2px
}

.c3-target.c3-defocused {
  opacity: .3!important
}

.c3-region {
  fill: #4682b4;
  fill-opacity: .1
}

.c3-brush .extent {
  fill-opacity: .1
}

.c3-legend-item {
  font-size: 12px
}

.c3-legend-item-hidden {
  opacity: .15
}

.c3-legend-background {
  opacity: .75;
  fill: #fff;
  stroke: #d3d3d3;
  stroke-width: 1
}

.c3-tooltip-container {
  z-index: 10
}

.c3-tooltip {
  border-collapse: collapse;
  border-spacing: 0;
  background-color: #fff;
  empty-cells: show;
  -webkit-box-shadow: 7px 7px 12px -9px #777;
  -moz-box-shadow: 7px 7px 12px -9px #777;
  box-shadow: 7px 7px 12px -9px #777;
  opacity: .9
}

.c3-tooltip tr {
  border: 1px solid #CCC
}

.c3-tooltip th {
  background-color: #aaa;
  font-size: 14px;
  padding: 2px 5px;
  text-align: left;
  color: #FFF
}

.c3-tooltip td {
  font-size: 13px;
  padding: 3px 6px;
  background-color: #fff;
  border-left: 1px dotted #999
}

.c3-tooltip td>span {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px
}

.c3-tooltip td.value {
  text-align: right
}

.c3-area {
  stroke-width: 0;
  opacity: .2
}

.c3-chart-arcs-title {
  dominant-baseline: middle;
  font-size: 1.3em
}

.c3-chart-arcs .c3-chart-arcs-background {
  fill: #e0e0e0;
  stroke: none
}

.c3-chart-arcs .c3-chart-arcs-gauge-unit {
  fill: #000;
  font-size: 16px
}

.c3-chart-arcs .c3-chart-arcs-gauge-max,
.c3-chart-arcs .c3-chart-arcs-gauge-min {
  fill: #777
}

.c3-chart-arc .c3-gauge-value {
  fill: #000
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js">
</script>

<body>
<br><br>

<div id="c3_chart" style="width: 95%; height: 250px"></div>
</body>