将列号与具有可变数据的热图的单元格相关联

Question

我有一个问题，希望你能帮我解决。

我正在使用D3.js创建热图，我需要将单元格与一个与行号和列号匹配的数值相关联。 行号正确关联，而列号并非总是如此。

这是因为我拥有的数据是可变的，我使用的静态条件并不好。

https://angular.io/api/common/NgSwitch，我有坚果名称和年份名称可以改变长度。 例如：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one-more-container">
<div id="post" class="single-featured-background" >
    <div class="onlyBg" style="background-image: url('http://via.placeholder.com/350x150')"></div>
    <div class="super-title-container">
        <h1 class="super-title">title</h1>
        <div class="description-container">
            <h2>sub title</h2>
            <p>paragraph</p>
        </div>      
    </div>
</div>

或

var nutsNames = ['germany', 'spain', 'france', 'belgium', 'austria'];
var yearsNames = ['1981', '1982', '1983', '1984', '1985'];

以下代码不起作用：

var nutsNames = ['germany', 'spain', 'portugal', 'belgium'];
var yearsNames = ['1983', '1984', '1985'];

此代码适用于第一类数据，但不适用于仅有3年而非5年的第二类数据。

我确信这是一件非常容易的事，但我找不到解决办法。

var cells = heatSvg.selectAll('.cell') .data(dataHeat) .enter() .append('g') .append('rect') .attr('data-r', function(d) { if(countrySelected == 'Europe') { return nutsNames.indexOf(d.country); } else { return nutsNames.indexOf(d.region); } }) .attr('data-c', function(d, i) { // <-- problem here if(countrySelected == 'Europe') { if(nutsNames.includes(d.country) && d.year == '1981') var idc = 0; else if(nutsNames.includes(d.country) && d.year == '1982') var idc = 1; else if(nutsNames.includes(d.country) && d.year == '1983') var idc = 2; else if(nutsNames.includes(d.country) && d.year == '1984') var idc = 3; else if(nutsNames.includes(d.country) && d.year == '1985') var idc = 4; return idc; } else { if(nutsNames.includes(d.region) && d.year == '1981') var idc = 0; else if(nutsNames.includes(d.region) && d.year == '1982') var idc = 1; else if(nutsNames.includes(d.region) && d.year == '1983') var idc = 2; else if(nutsNames.includes(d.region) && d.year == '1984') var idc = 3; else if(nutsNames.includes(d.region) && d.year == '1985') var idc = 4; return idc; } 就是这样：

dataHeat

或：

var dataHeat = [
    {
        country: "germany",
        perc: "87.00",
        ​​​region: "",
        ​​​year: "1981"
    },{
        country: "germany",
        perc: "90.00",
        ​​​region: "",
        ​​​year: "1982"
    },{
        country: "germany",
        perc: "85.00",
        ​​​region: "",
        ​​​year: "1983"
    },{
        country: "germany",
        perc: "97.00",
        ​​​region: "",
        ​​​year: "1984"
    },{
        country: "germany",
        perc: "91.20",
        ​​​region: "",
        ​​​year: "1985"
    },{
        country: "spain",
        perc: "75.00",
        ​​​region: "",
        ​​​year: "1981"
    },{
        country: "spain",
        perc: "92.00",
        ​​​region: "",
        ​​​year: "1982"
    },{
        country: "spain",
        perc: "95.00",
        ​​​region: "",
        ​​​year: "1983"
    },{
        country: "spain",
        perc: "95.00",
        ​​​region: "",
        ​​​year: "1984"
    },{
        country: "spain",
        perc: "99.02",
        ​​​region: "",
        ​​​year: "1985"
    },{
        country: "france",
        perc: "99.00",
        ​​​region: "",
        ​​​year: "1981"
    },{
        country: "france",
        perc: "99.00",
        ​​​region: "",
        ​​​year: "1982"
    },{
        country: "france",
        perc: "98.00",
        ​​​region: "",
        ​​​year: "1983"
    },{
        country: "france",
        perc: "90.00",
        ​​​region: "",
        ​​​year: "1984"
    },{
        country: "france",
        perc: "98.90",
        ​​​region: "",
        ​​​year: "1985"
    },{
        country: "belgium",
        perc: "84.00",
        ​​​region: "",
        ​​​year: "1981"
    },{
        country: "belgium",
        perc: "84.00",
        ​​​region: "",
        ​​​year: "1982"
    },{
        country: "belgium",
        perc: "93.00",
        ​​​region: "",
        ​​​year: "1983"
    },{
        country: "belgium",
        perc: "95.00",
        ​​​region: "",
        ​​​year: "1984"
    },{
        country: "belgium",
        perc: "97.02",
        ​​​region: "",
        ​​​year: "1985"
    },{
        country: "austria",
        perc: "88.00",
        ​​​region: "",
        ​​​year: "1981"
    },{
        country: "austria",
        perc: "91.00",
        ​​​region: "",
        ​​​year: "1982"
    },{
        country: "austria",
        perc: "92.00",
        ​​​region: "",
        ​​​year: "1983"
    },{
        country: "austria",
        perc: "90.00",
        ​​​region: "",
        ​​​year: "1984"
    },{
        country: "austria",
        perc: "95.00",
        ​​​region: "",
        ​​​year: "1985"
    }
];
var nutsNames = ['germany', 'spain', 'france', 'belgium', 'austria'];
var yearsNames = ['1981', '1982', '1983', '1984', '1985'];