如何改变C3加载函数的onClick函数答案

【问题标题】：How to change the onClick function of C3 load function如何改变C3加载函数的onClick函数
【发布时间】：2016-06-16 13:12:48
【问题描述】：

我正在尝试使用 C3 的加载功能更新具有不同 onclick 功能的 C3 图形。

代码sn-p在这里：

var json1 = [{
            date: '2014-01-01',
            upload: 200,
            download: 200,
            total: 400
        }, {
            date: '2014-01-02',
            upload: 100,
            download: 300,
            total: 400
        }, {
            date: '2014-02-01',
            upload: 300,
            download: 200,
            total: 500
        }, {
            date: '2014-02-02',
            upload: 400,
            download: 100,
            total: 500
        }];
        
        var json2 = [{
            date: '2014-01-01',
            upload: 200,
            download: 500,
            total: 700
        }, {
            date: '2014-01-02',
            upload: 500,
            download: 450,
            total: 950
        }, {
            date: '2014-02-01',
            upload: 200,
            download: 800,
            total: 1000
        }, {
            date: '2014-02-02',
            upload: 300,
            download: 500,
            total: 800
        }];
        
var chart = c3.generate({
   bindto: '#div1',  
  data: {
        json: json1,
        onclick: function (event) {
        	console.log("11111111111") ;               
				},
        keys: {
            x: 'date',
            value: ['upload', 'download']
        }
    },
    axis: {
        x: {
            type: 'timeseries',
            tick: {
                format: function (x) {
                    if (x.getDate() === 1) {
                        return x.toLocaleDateString();
                    }
                }
            }
        }
    }
});

setTimeout(function () {
    chart.unload();
}, 1000);

setTimeout(function () {
    chart.load({
                json: json2,
                keys: {
                    x: 'date',
                    value: ['upload', 'download']
                },
                onclick: function (event) {
        						console.log("22222222") ;               
                },
            });
}, 1000);

<link href="https://rawgit.com/masayuki0812/c3/master/c3.css" rel="stylesheet"/>
<script src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.10/d3.min.js"></script>
<div id="div1"></div>

请告诉我一种更新加载函数本身的 onClick 函数的方法。

【问题讨论】：

你说的different onclick function是什么意思，也是你想做的onclick
@curiousguy 通过这种方式尝试在 onclick 上运行不同的事件。正如你在上面的例子中看到的，我想通过调用不同的console.log来改变C3的onclick on load函数的实现。我希望你能明白。

标签： javascript jquery d3.js c3.js

【解决方案1】：

据我所知，c3.load() 并没有提供 c3.generate() 的所有元素，因此您有两种方法可以做到这一点。

重用c3.generate()，或者将点击事件交给一个可以改变的变量，比如：

// INITIAL CLICK HANDLER
var clickhandler = function(event) {
        	console.log("11111111111");
}

var json1 = [{
        date: '2014-01-01',
        upload: 200,
        download: 200,
        total: 400
    }, {
        date: '2014-01-02',
        upload: 100,
        download: 300,
        total: 400
    }, {
        date: '2014-02-01',
        upload: 300,
        download: 200,
        total: 500
    }, {
        date: '2014-02-02',
        upload: 400,
        download: 100,
        total: 500
    }];
    
    var json2 = [{
        date: '2014-01-01',
        upload: 200,
        download: 500,
        total: 700
    }, {
        date: '2014-01-02',
        upload: 500,
        download: 450,
        total: 950
    }, {
        date: '2014-02-01',
        upload: 200,
        download: 800,
        total: 1000
    }, {
        date: '2014-02-02',
        upload: 300,
        download: 500,
        total: 800
    }];

// GENERATE CHART FROM JSON1            
var chart = c3.generate({
  bindto: '#div1',  
  data: {
        json: json1,
        onclick: function(event) { clickhandler(event) },
        keys: {
            x: 'date',
            value: ['upload', 'download']
        }
    },
    axis: {
        x: {
            type: 'timeseries',
            tick: {
                format: function (x) {
                    if (x.getDate() === 1) {
                        return x.toLocaleDateString();
                    }
                }
            }
        }
    }
});

// MAKE CHANGES TO THE LOADED CHART
setTimeout(function () {
    // CHANGE THE CLICK EVENT HANDLER
    clickhandler = function(event) {
        console.log('22222222222');
    };
    // UNLOAD EXISTING DATA AND LOAD NEW DATA FROM JSON2
    chart.load({
                json: json2,
                keys: {
                    x: 'date',
                    value: ['upload', 'download']
                },
                unload: chart.columns
   });
}, 1000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.js"></script>
<div id="div1"></div>

【讨论】：

感谢您的回复。它有帮助。