0

使用 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 文件中更新，但我只是不知道如何解决这个问题。任何指针将不胜感激！

谢谢！

4

2 回答 2

0

像这样更改您的 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");
      });
于 2013-08-27T10:20:45.877 回答
0

您需要做的就是稍微修改附加circles 的代码。您需要更改代码段

node.append("circle")
  .attr("r", 4.5);

至

node.append("circle")
  .style("stroke", function(d) { return d.score > 5 ? "red" : "steelblue"; })
  .attr("r", 4.5);

您显然可以以相同的方式将类似的内容应用于例如填充颜色。如果您有大量不同的颜色和阈值，则可能值得使用比例而不是条件语句进行调查。

于 2013-08-27T10:13:02.713 回答