[英]D3.js node color based on type
給定以下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標記; 為每個列表項分配顏色。 當我改變顏色選擇器容器的顏色,在任意列表中的項目,它只是改變了顏色.school
,因為它是在這里硬編碼MyNode = d3.select("#node").selectAll(".school").select("circle");
我能怎樣改變以匹配type
與在找到的節點類型列表項nodes.type
?
$(document).ready(function () {
$.getJSON("data.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(''));
$("#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()) });
ColorSchool = d3.rgb(color.toHexString());
}
});
});
});
});
傳遞給此函數:
function ColorType(d)
{
if (d.type == "school") { return ColorSchool;}
if (d.type == "univeristy"){ return Coloruniveristy;}
if (d.type == "company"){ return Colorcompany;}
}
您可以將類型引用存儲在實際元素的自定義屬性中。 由於只需要一個字符串,這足以解決您的問題。
創建<li>
元素時,可以添加帶有o.type
字符串的屬性,例如: data-fortype
。
在each
都會初始化spectrum
東西中,您可以使用this.getAttribute
或jQuery等效項將其提取。
香草js中的示例:(我真的不了解jQuery API,對此感到抱歉)
var data = { "types": [{ "type": "school", "image": "image01" }, { "type": "univeristy", "image": "image02" }, { "type": "company", "image": "image03" }] }; // Make UI from code: makeUI(); function makeLi(type) { return "<li>" + type.type + // (1) Here, the selector is stored in attr. "<input class='test' data-forType='" + type.type + "' type='text' /></li>" }; function onChange(e) { // (2) Here, we retreive the attribute console.log("Selector: " + e.target.getAttribute("data-forType")); }; function makeUI() { data.types.forEach(function(type) { document.querySelector("ul").innerHTML += makeLi(type); }); Array.from(document.querySelectorAll("li")) .forEach(function(el) { el.addEventListener("change", onChange); }); };
<ul> </ul>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.