Javascript合并两个函数,用另一个元素检查节点类型
javascript merge two functions to check the node type with another element
给定以下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
的颜色,也就是学校。
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;}
}
}
相关文章:
- 使用clickToggle并在单击另一个元素时关闭元素
- 按我自己的类克隆另一个元素的内容和顺序
- 如何通过HTML+CSS中的另一个元素Selector更改元素的属性值
- jQuery-将列表项的一个元素移动到同一项的另一个元素中+对我的列表中的每个项执行此操作
- jquery从另一个元素中移除移除
- DIV怎么能像Javascript中的另一个元素一样工作呢
- 使用数据属性将HTML数据复制到另一个元素
- 将鼠标悬停在Angular JS中的一个元素上,并将Class添加到另一个元素中
- 在类JavaScript选择的另一个元素中选择一个标记元素
- 只要存在,就用另一个元素替换一个元素
- 初学者反应查询(如何删除一个元素并附加另一个元素)
- 将jquery ui窗口的父元素设置为另一个元素
- 如何激活下拉菜单:在一个元素上单击768px宽度下方,在另一个元素上将鼠标悬停在768px上方
- Pixijs将元素附加到另一个元素
- JavaScript:将输入范围行为链接到另一个元素
- 如何使用元素's属性值,以针对jQuery中具有相同属性值的另一个元素
- angularjs阵列拼接到另一个元素
- 另一个元素JAVAscript中的元素位置
- 当鼠标也在触摸另一个元素时,d3.js鼠标悬停事件未被触发
- 将元素的可见性绑定到另一个元素