[英]D3.js node color based on type
Given the below json structure: 给定以下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"
},
]
}
I get the list of the type of nodes from types.type
and append it to a html tag; 我从
types.type
获取节点类型列表,并将其附加到html标记; assigning a color to each list item. 为每个列表项分配颜色。 When I change the color in the color picker container, in any of the list items, it only changes the color for
.school
, because it is hardcoded in here MyNode = d3.select("#node").selectAll(".school").select("circle");
当我改变颜色选择器容器的颜色,在任意列表中的项目,它只是改变了颜色
.school
,因为它是在这里硬编码MyNode = d3.select("#node").selectAll(".school").select("circle");
how can I change it to match the type
in the list item with the node type found in the nodes.type
? 我能怎样改变以匹配
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());
}
});
});
});
});
which passes into this function: 传递给此函数:
function ColorType(d)
{
if (d.type == "school") { return ColorSchool;}
if (d.type == "univeristy"){ return Coloruniveristy;}
if (d.type == "company"){ return Colorcompany;}
}
You could store the type reference in the actual element, in a custom attribute. 您可以将类型引用存储在实际元素的自定义属性中。 Since it's only one string you need, this might be enough to fix your problem.
由于只需要一个字符串,这足以解决您的问题。
When creating the <li>
element, you add an attribute, eg: data-fortype
, with the o.type
string. 创建
<li>
元素时,可以添加带有o.type
字符串的属性,例如: data-fortype
。
In the each
that initializes the spectrum
thingy, you extract it using this.getAttribute
or the jQuery equivalent. 在
each
都会初始化spectrum
东西中,您可以使用this.getAttribute
或jQuery等效项将其提取。
An example, in vanilla js: (I don't really know the jQuery API, sorry about that) 香草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.