d3.js折线图深入到表的条形图

Question

我整天都在搜索，也许我没有使用正确的词来找到自己想要的东西。在搜索中，我确实找到了这个jsfiddle解决方案，该解决方案已更改为模仿我想要的功能。这是jsfiddle代码：http://jsfiddle.net/nmxj67t9/29/

$(function () {
// Create the chart

tableBack = function(){
 $("#container").show();
    // remove the existing table
    $('#here_table .table').remove();
}
var createTable = function(data) {

    //console.log("$series = %o", $chart);
    $("#container").hide();
    // remove the existing table
    $('#here_table .table').remove();

    // create a table object
    var table = $('<div class="table"><a href="#" class="back" onclick="tableBack()">back</a><table></table></div>').addClass('chart-table');

    // iterate the series object, create rows and columnts
    $.each(data, function( index, value ) {
        var row = $('<tr></tr>').addClass('chart-row');
        var col1 = $('<td></td>').text(value.name).appendTo(row);
        var col2 = $('<td></td>').text(value.y).appendTo(row);

        // mark the row of the clicked sector


        table.append(row);
    });

    // insert the table into DOM
    $('#here_table').append(table);
};
$('#container').highcharts({
chart: {
    type: 'line'  // Mentioned only pie.Need different graph on individual level.
},
title: {
    text: 'Basic drilldown'
},
xAxis: {
    type: 'category'
},
plotOptions: {
    series: {
        borderWidth: 1,
        dataLabels: {
            enabled: true,
        }
    }
},
series: [{
    id: 'toplevel',
    name: 'Month',
    data: [
        {name: 'January', y: 4, drilldown: 'level1'}, //Level-1
        {name: 'March', y: 2, drilldown: 'level1'},
        {name: 'April', y: 1, drilldown: 'level1'},
        {name: 'May',y: 2, drilldown: 'level1'},
        {name: 'June', y: 1, drilldown: 'level1'},
        {name: 'July', y: 6, drilldown: 'level1'},
        {name: 'August', y: 8, drilldown: 'level1'}
    ]
}],
drilldown: {
    series: [ { 
        id:'level1',
        name: 'Level 1',
        type: 'bar',
        data: [
            {name: 'Nurs', y: 1, drilldown: 'level2'},
            {name: 'Rec', y: 2, drilldown: 'level2'},
            {name: 'HSKP', y: 3, drilldown: 'level2'},
            {name: 'CHEF', y: 4, drilldown: 'level2'} //Level-2
        ] 
    },{                
        id:'level2',
        name: 'Level 2',
        type: 'bar',
        point: {
                events: {
                    click: function () {
                        console.log(this);
                        if(this.name == "Deeper Level-3"){
                           var data = [
            {name:'Violet', y:1},
            {name:'Red',y:2},
            {name:'Yellow', y:3}
        ];
                           createTable(data);
                        }

                    }
                }
            },
        data: [
            {name: 'Green', y:1},
            {name: 'Red', y:2},
            {name: 'Blue', y:3},
            {id:"test",name: 'Deeper Level-3', y: 4} //Level-3
        ] 
    },{
        id: 'level3',
        name: 'Level 3',
        type: 'bar',
        data: [
            {name:'Violet', y:1},
            {name:'Red',y:2},
            {name:'Yellow', y:3}
        ]
    }]
}
    });

}）;

关于此代码，我有三个问题。 1.如何设置不对数据进行硬编码的代码？我想将其保持打开状态，以便可以使用不同的数据源制作多个图表。 2.如何设置此代码以将其引入Power BI？ 3.如何添加额外的编码，以便可以在图表之前向下钻取更多级别？我想从部门到职位（d，e，n）到角色，再从角色到邻域，然后一旦选择了邻域，就更改为表格并列出该邻域中的雇员。

我一直在玩和谷歌搜索，但我不知道该怎么做。

谢谢

是