d3js-渲染图例键时出错-重复渲染? [英] d3js - error in rendering a legend key - duplicated render?

问题描述

我正在尝试完成时间轴应用程序--但是我遇到了区域关键区域的故障

最新小提琴 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');


}

解决方案

此处的问题在以下代码中:

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

每次在foreach函数中调用buildKey时，您将发送整个数据并在所有文本标签元素上进行选择，这是第一次创建文本标签，但是之后选择它们进行数据重新绑定然后激活当前启用的元素，每个迭代调用都不同，并且对于所有选定的文本标签而言，当前激活的元素都是相同的，其中所有文本标签均具有相同的.laneKeyText类.

我在这里添加了一种修复方法，但是我敢肯定有一种更干净的修复方法:

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

I am trying to complete a timeline application - - but I am getting a malfunction with the region key area

latest fiddle https://jsfiddle.net/fqn4vb90/2/

when this gets rendered -- they all seem to be duplicates of the first array element? So in this example -- first element is JA, the second should be AS, and the third should be 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');


}

解决方案

The problem here is in the following code:

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

Everytime you call buildKey inside foreach function you are sending the whole data and do a select on all text tags elements, first time text tags are created, but after that they are being selected for data rebind and then activate the current enabled element, which is different each iteration call, and the current active will be same for all selected text tags in which the all have the same class .laneKeyText.

I added here a way to fix it but I'm sure there is a cleaner way to fix it:

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

这篇关于d3js-渲染图例键时出错-重复渲染?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！