对于每个节点,我都有一个圆圈,在函数 ColorType(d)
的帮助下为它着色:
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");
我的ColorType
函数是
function ColorType(d){
for (var i = 0; i < TypesTab.length; i++) {
if (d.type == TypesTab[i].type) { return ColorAction;}
}
}
在上面的函数中,d.type
是我的节点的类型(参见下面的 json 文件结构)。而 TypesTab[i].type
是我的每个类型单独存储在 types 中,检查节点类型是否与 types 中类型的值之一相同,如果是则应用ColorAction
为节点圆圈着色。
这里是ColorAction
代码,它嵌入在附加到types中每个类型的每个颜色选择器容器中,该列表插入到#filterColor
html dom中。因此每种类型都有一个颜色选择器容器,它应该只为自己的类型着色。
$(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'); //stores all types
mynodes = obj.nodes;
console.log("mynodes : ", mynodes); //array of all my nodes
console.log("mynodes : ", mynodes[3].type); //reading the type of the fourth object in the nodes array
$("#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), //generate random initial color for each container
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(".entreprise").select("circle");
MyNode.style("fill", function(d) {
return d3.rgb(color.toHexString())
});
Coloration = d3.rgb(color.toHexString());
}
});
});
});
});
问题是当我在 ColorType(d)
函数中硬编码类型时,
if (d.type == "school") { return ColorAction;}
它成功地仅对 <strong>school 类型的节点进行了着色。但是,如果我想让它动态化,以便用颜色选择器分配给的类型为节点着色,则会失败,因为我无法与 each
的 o.type
建立连接。所以问题是将 each
的 o.type
传递到 ColorAction
和/或 ColorType(d)
中,以便每个容器只为自己类型的节点着色。
这是一个不成功的尝试,因为它没有考虑 o.type
并从保存 types< 中的所有 type
的全局变量 ( TypesTab
) 读取 types 中的 type
/强>:
function ColorType(d){
for (var i = 0; i < TypesTab.length; i++) {
if (d.type == TypesTab[i].type) { return ColorAction;}
}
}
下面是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"
},
...
]
}
最佳答案
这就是我读取/导入 JSON 的方式。 for in 内部是基本的,因此您需要更改该部分以满足您的需求。
d3.json("data.json", 函数 (错误, 数据) {
console.log(d3.values(数据));//这样做作为检查
for (数据中的 var d) {
d.节点=+d.节点;
d.links = +d.links;
d.类型 = +d.类型;
}
//svg 可以放在这里
})
关于javascript - D3.js 通过使用 Spectrum.js 的函数为节点圆圈着色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40608972/