Javascript合并两个函数,用另一个元素检查节点类型

javascript merge two functions to check the node type with another element

本文关键字:另一个 元素 检查 类型 节点 函数 合并 两个 Javascript      更新时间:2023-09-26

给定以下json结构:

{
    "nodes": [
        {
        "type": "school",
        "country": "US",
        "name": "saint peter's",
        "id": 1006
        },
        {
        "type": "univeristy",
        "country": "Brazil",
        "name": "saint joseph's",
        "id": 1007
        }        
        ...
    ],
    "links": [
            {
            "source": 1006,
            "target": 1007,
            "value": 20            
        },
    ],
    "types": [
                {
                    "type": "school",
                    "image": "image01"
                },
                {
                    "type": "univeristy",
                    "image": "image02"
                },
                {
                    "type": "company",
                    "image": "image03"
                },
            ]   
}

我从types.type获得节点类型的列表,并将其附加到html标记;为每个列表项指定颜色。当我改变颜色选择器容器中的颜色时,在任何列表项中,它只改变d.type == "school"的颜色,因为我手动检查节点类型d.type是否等于学校,然后我从上一个函数的最后一行应用ColorAction。我如何改变它(d.type == "school"),以匹配在json的nodes.type中找到的节点类型的type,并在mynodes = obj.nodes的每个对象中访问?

var ColorAction = "";
$(document).ready(function () {
    $.getJSON("databeta.json", function (obj) {
        $('#filterColor').data('types', obj.types.map(function (o) {
            // console.log(o.type);
            return o.type;
        })).append(obj.types.map(function (o) {
            return '<li>' + o.type + '<input class="color-picker" type="text"/></li>';
        }).join(''));
        var data = $('#filterColor').data('types');
        // console.log("end", data);
        mynodes = obj.nodes;
        console.log("mynodes : ", mynodes);
        $("#filterColor .color-picker").each(function(){
            $(this).spectrum({
                color: (function (m, s, c) {
                    return (c ? arguments.callee(m, s, c - 1) : '#') +
                        s[m.floor(m.random() * s.length)]
                })(Math, '0123456789ABCDEF', 5),
                preferredFormat: "rgb",
                showInput: true,
                showPalette: true,
                showAlpha: true,
                palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]],
                change: function(color) {
                    MyNode = d3.select("#node").selectAll(".school").select("circle");
                    MyNode.style("fill", function(d) {
                        return d3.rgb(color.toHexString())
                    });
                    ColorAction = d3.rgb(color.toHexString());
                }
            });
        });
    });
});

ColorAction传递给这个函数来更新类型为school:

的节点的d.type == "school"的颜色
function ColorType(d)
{
  if (d.type == "school") { return ColorAction;}
}

此函数将上面在颜色选择器容器中选择的颜色应用于具有指定类型的节点。因此,我们的目标是将此函数合并到上面的每个列表项中,以便每个颜色选择器容器更新列表项所属类型相同的颜色。

更新:

我已经有一个全局变量TypesTab,它存储了我的json的types,并且可以在ColorType函数中访问,当我做控制台日志时,它重复了json文件的types对象我有节点的次数。

更新2:

例如,不用硬编码school类型,我可以通过: 访问它
if (d.type == TypesTab[0].type) { return ColorAction;}

但是,所有的列表项的行为都是一样的,无论我从一个颜色选择器中改变颜色还是从另一个类型列表中改变颜色,它只改变TypesTab[0].type的颜色,也就是学校。

更新3:

下面是我后来使用colortype函数给节点上色的方法:
 node.append("circle")
     .attr("r", 20)
     .attr("y", -25)
     .style("fill", function(d) { return ColorType(d); })
     .style("stroke-width",0.5)
     .style("stroke",'black')
     .attr("opacity", "1");

使用for循环

 function ColorType(d){
     for (var i = 0; i < TypesTab.length; i++) {
      if (d.type == TypesTab[i].type) { return ColorAction;}
    }
}