选择/检测d3.js中更改的元素?

 罗丝012 发布于 2023-02-08 12:21

示例如下所示:

a=[1,2,3,4,5];
svg.selectAll("rect").data(a)
a[1]=10;
a[4]=50;
svg.selectAll("rect").data(a)

第二个和第五个元素a被改变了.我想只选择这两个元素并将其颜色设置为红色.但是,我不知道该怎么做,换句话说,在d3.js中选择这些更改的元素.(据我所知,enter()不能做这个工作).有没有人有这个想法?

2 个回答
  • 可能有更好的方法:

    //update data array
    a[4]=50;
    
    //color update elements
    svg.selectAll('rect')
        .filter(function(d, i){ return d != a[i]; })
        .style('color', 'red')
    
    //bind updated data
    svg.selectAll('rect').data(a)
    

    2023-02-08 12:22 回答
  • 您需要一种方法来存储旧数据值,以便您可以将其与新数据值进行比较.也许添加这样的自定义数据属性:

    a=[1,2,3,4,5];
    svg.selectAll("rect").data(a)
        .attr("data-currentVal", function(d){return d});
    a[1]=10;
    a[4]=50;
    svg.selectAll("rect").data(a)
        .style("fill", function(d) {
           if (d3.select(this).attr("data-currentVal") != d) {return red;}
           else {return black;}
        });
    

    实例(略微幻想,以便您可以看到发生的变化):http:
    //fiddle.jshell.net/5Jm5w/1/

    当然,对于d是复杂对象的更常见示例,您需要有一种方法可以将其值作为唯一字符串访问,因为属性值总是被强制转换为字符串.例如,如果你有一个(x,y)点,则需要创建一个名为helper的函数dToString = function(d) {return "(" + d.x + "," + d.y + ")";},然后在设置属性时传入该函数的名称,并在比较旧函数时再次使用它.新.

    2023-02-08 12:23 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有