d3 js - ошибка рендеринга ключа легенды - дублированный рендер? - PullRequest
Новая
       27

d3 js - ошибка рендеринга ключа легенды - дублированный рендер?

0 голосов
/ 27 января 2020

Я пытаюсь заполнить заявку на временной шкале - - но у меня сбой с областью ключа региона

enter image description here

последняя скрипка https://jsfiddle.net/fqn4vb90/2/

когда это визуализируется - все они кажутся дубликатами первого элемента массива? Итак, в этом примере - первый элемент - JA, второй - AS, а третий - E 

let listRegions = [{
    "label" : "A",
    "value" : "SIEA"
},{
    "label" : "E",
    "value" : "SIEE"
},{
    "label" : "JA",
    "value" : "SIEJA-JAPAN"
},{
    "label" : "AS",
    "value" : "SIEJA-ASIA"
}];


//reg
regions.forEach(function(entry) {

    //const regions6 = ["SIEJA-ASIA", "SIEE"];
    const legendRegions = listRegions.map(region => (
        {
            ...region,
            enabled: entry === region.value
        })
    );
    console.log("legendRegions", legendRegions);

    buildKey(legendRegions)

});


function buildKey(data){

    console.log("DATA", data);


    reg
        .selectAll('.laneKeyText')
        .data(data)
        .enter()
        .append('text')
        .text(function(d) {
            return d.label;
        })
        .style("fill", function(d, i) {
            if(d.enabled){
                return '#0072ce';
            }
            return '#D8D8D8';
        })
        .attr('x', function(d, i) {
            return (i * 25);
        })
        .attr('dy', 5)
        .attr('dx', 3)
        .attr('text-anchor', 'start')
        .attr('class', 'laneKeyText');

    reg
        .selectAll(".laneKeyRect")
        .data(data)
        .enter()
        .append("rect")
        .attr('x', function(d, i) {
            return (i * 25);
        })
        .attr('y', -10)
        .attr("width", 20)
        .attr("height", 20)
        .style("fill", "none")
        .style("stroke", "#D8D8D8")
        .attr('class', 'laneKeyRect');


}

1 Ответ

1 голос
/ 27 января 2020

Проблема здесь в следующем коде: 

...
function buildKey(data){
    reg
    .selectAll('.laneKeyText')
    .data(data)
    .enter()
    .append('text')
...

Каждый раз, когда вы вызываете buildKey внутри foreach, вы отправляете все данные и делаете выбор для всех элементов текстовых тегов, в первый раз. текстовые теги создаются, но после этого они выбираются для повторного связывания данных, а затем активируют текущий включенный элемент, который отличается при каждом вызове итерации, и текущий активный будет одинаковым для всех выбранных текстовых тегов, в которых все имеют одинаковый класс .laneKeyText.

Я добавил здесь способ исправить это, но я уверен, что есть более чистый способ исправить это:

https://jsfiddle.net/mamounothman/9fp8oehj/37/

...