c3.js面积图：选中一行后面积不透明度消失答案

【问题标题】：c3.js area chart: area opacity disappears after a line is selectedc3.js面积图：选中一行后面积不透明度消失
【发布时间】：2019-07-30 16:26:05
【问题描述】：

我创建了一个面积图，并希望保持线条下方区域的不透明度 1.0，但是当我选择一条线时，不透明度会消失，并且所有线条也不会消失。我想知道如何才能保持线条下方区域的不透明度，而不是什么？

我尝试过 mouseover/mouseout ，但这并不能完全按照我想要的方式进行，因为我必须在图例上稍作停顿才能使 mouseout 起作用。我通过创建一个新的图例来做到这一点，这里是它的代码。我尝试了很多其他更简单的事情，并尝试编写代码来刷新数据，但这是我最接近这个网站的地方： https://c3js.org/samples/legend_custom.html

//this part is the new legend part, but can be added after the foundation part. 
//or it may be omitted too. 
    function toggle(id) {
        chart.toggle(id);
    }

    d3.select('.container').insert('div', '.chart').attr('class', 'legend').selectAll('span')
        .data(['data1', 'data2', 'data3'])
      .enter().append('span')
        .attr('data-id', function (id) { return id; })
        .html(function (id) { return id; })
        .each(function (id) {
            d3.select(this).style('background-color', chart.color(id));
        })
        .on('mouseover', function (id) {
            chart.focus(id);
            //chart.flush();
            d3.selectAll(".c3-area").style("opacity", "1.0");
        })
        .on('mouseout', function (id) {
            chart.revert();
            //chart.flush();
            d3.selectAll(".c3-area").style("opacity", "1.0");
        })
        .on('click', function (id) {
            chart.toggle(id);
            d3.selectAll(".c3-area").style("opacity", "1.0");
        });


//this part is the foundation
    var chart = c3.generate({
        data: {
            columns: [
                ['data1', 300, 350, 300, 0, 0, 0],
                ['data2', 130, 100, 140, 200, 150, 50],
                ['data3', 100, 200, 0, 300, 350, 220]
            ],
            types: {
                data1: 'area',
                data2: 'area-spline',
                data3: 'area'
            } 
        }
    });
    d3.selectAll(".c3-area").style("opacity", "1.0");

我希望不透明度保持 1.0，它确实如此，直到我单击底部的选择工具，然后不透明度重置回 0.3 或任何默认值。我没有错误消息。

我也试过了，还是不行：

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 300, 350, 300, 0, 0, 0],
            ['data2', 130, 100, 140, 200, 150, 50]
        ],
        types: {
            data1: 'area',
            data2: 'area-spline'
        },
        style: {
            opacity: 1.0
        },
        legend: {
            item: {
                onclick: function (id) {
                    //d3.selectAll(".c3-area").style("opacity", 1.0);
                    chart.load();
                    d3.selectAll(".c3-area").style("opacity", 1.0);
                    //chart.load();
                }
            }
        }
    }
});

【问题讨论】：

标签： javascript d3.js c3.js

【解决方案1】：

在配置中使用onrendered 函数可能是你想要的

http://jsfiddle.net/9t24cz8q/

var chart = c3.generate({
    bindto: "#areachart",
  data: {
    columns: [
      ['data1', 300, 350, 300, 0, 0, 0],
      ['data2', 130, 100, 140, 200, 150, 50]
    ],
    types: {
      data1: 'area-spline',
      data2: 'area-spline'
    }
  },
  onrendered: function () {
    d3.selectAll(".c3-area").style("opacity",1);
  }
});

这里，图例中鼠标悬停的系列区域的不透明度设置为1，之后其他恢复为1。

【讨论】：