[英]D3 javascript color from JSON attribute
使用D3 Javascript和JSON,我需要创建与以下内容非常相似的内容:
http://bl.ocks.org/mbostock/4063550
JSON文件(从网站复制)类似于:
{
"name": "flare",
"children": [
{
"name": "analytics",
"children": [
{
"name": "cluster",
"children": [
{"name": "AgglomerativeCluster", "size": 3938},
{"name": "CommunityStructure", "size": 3812},
{"name": "HierarchicalCluster", "size": 6714},
{"name": "MergeEdge", "size": 743}
]
},
现在代替上面代码中的“大小”,我有了“得分”(即“得分”:3)。
我想要实现的是类似于网站的图表,但是区别是分数超过某个阈值(例如> 5),我希望小蓝圈具有某种颜色(即红色)。
我知道这需要在index.html文件中进行更新,但是我只是不知道该如何解决。 任何指针将不胜感激!
谢谢!
您所需要做的就是略微修改添加circle
s的代码。 您需要更改代码段
node.append("circle")
.attr("r", 4.5);
至
node.append("circle")
.style("stroke", function(d) { return d.score > 5 ? "red" : "steelblue"; })
.attr("r", 4.5);
显然,您可以以相同的方式将这样的内容应用于例如填充颜色。 如果您拥有更多不同的颜色和阈值,则值得使用刻度而不是条件语句进行调查。
像这样更改您的JSON:
{
"name": "flare",
"children": [
{
"name": "analytics",
"children": [
{
"name": "cluster",
"children": [
{"name": "AgglomerativeCluster", "score": 3938},
{"name": "CommunityStructure", "score": 3812},
{"name": "HierarchicalCluster", "score": 6714},
{"name": "MergeEdge", "score": 743}
]
},
现在使用一个函数检查数据中的条件并设置圆的样式:
node.append("circle")
.attr("r", 4.5)
.style("fill",function(d){
return ((d.score > 5)?"red":"blue");
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.