有没有办法替换 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);

我创建了一个 fiddle 供您测试：http://jsfiddle.net/vbn4tquz/

下面是完整的代码和可执行片段：

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>

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

Is there a way to replace regions in c3?

javascript

d3.js

charts

c3.js

region