Fatal编程技术网
  • javascript/
  • Javascript JS-如何删除重复的JSON节点并为所有合并的节点添加一个链接

Javascript JS-如何删除重复的JSON节点并为所有合并的节点添加一个链接

javascript json d3.js graph

Javascript JS-如何删除重复的JSON节点并为所有合并的节点添加一个链接,javascript,json,d3.js,graph,visualization,Javascript,Json,D3.js,Graph,Visualization,在这里输入code我有一个JSON文件，我想从中创建一个d3定向的 在影响分数较高的方向上绘制带箭头的图形 {"nodes":[{"Name":"GJA","influenceScore":81.0,"type":10.0}, {"Name":"JJZ","influenceScore":82.6,"type":30.0}, {"Name":"SAG","influenceScore":89.0,"type":30.0}, {"Name":"JJZ","influenceScore":82.6,

在这里输入code
我有一个JSON文件，我想从中创建一个d3定向的 在影响分数较高的方向上绘制带箭头的图形

{"nodes":[{"Name":"GJA","influenceScore":81.0,"type":10.0},
{"Name":"JJZ","influenceScore":82.6,"type":30.0},
{"Name":"SAG","influenceScore":89.0,"type":30.0},
{"Name":"JJZ","influenceScore":82.6,"type":30.0}],"links":
[{"source":0,"target":0,"type":"SA","value":1},
{"source":0,"target":1,"type":"SA","value":1},
{"source":0,"target":2,"type":"SA","value":1},
{"source":0,"target":3,"type":"SA","value":1}]}
我是一个新手，所以想从这里的专家那里得到一些帮助 我的d3代码如下：

.link {
 stroke: #ccc;
 }

.node text {
 pointer-events: none;
 font: 12px sans-serif;
 }

</style>


<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var width = 1200,
    height = 900;

var color = d3.scale.category10();
var fill = d3.scale.category10();
var svg = d3.select("body").append("svg")
   .attr("width", width)
   .attr("height", height);

var force = d3.layout.force()
   .gravity(0.052)
   .distance(350)
   .charge(-20)
   .size([width, height]);

d3.json("\\abc.json", function(error, json) {
 if (error) throw error;

 force
  .nodes(json.nodes)
  .links(json.links)
  .start();

var link = svg.selectAll(".link")
   .data(json.links)
   .enter().append("line")
   .attr("class", "link").style("stroke-width", function(d) { return 
    Math.sqrt(d.value); }).style("stroke", function(d) {return 
    fill(d.value);});

var node = svg.selectAll(".node")
  .data(json.nodes)
 .enter().append("g")
  .attr("class", "node")
  .call(force.drag);

  node.append("circle")
  .attr("class", "node")
  .attr("r", function(d) { return (d.influenceScore/10) + 10; 
  }).style("fill", function(d) { return color(d.type); });

  node.append("text")
  .attr("dx", -35)
  .attr("dy", "4.5em").text(function(d) { return d.Name });


  node.append("title").text(function(d) { return d.Name ;});


 force.on("tick", function() {
  link.attr("x1", function(d) { return d.source.x; })
    .attr("y1", function(d) { return d.source.y; })
    .attr("x2", function(d) { return d.target.x; })
    .attr("y2", function(d) { return d.target.y; });

node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + 
 ")"; });
   });
  });

.link{
冲程：#ccc；
}
.节点文本{
指针事件：无；
字体：12px无衬线；
}
可变宽度=1200，
高度=900；
var color=d3.scale.category10（）；
var fill=d3.scale.category10（）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var-force=d3.layout.force（）
.重力（0.052）
.距离（350）
。收费（-20）
.尺寸（[宽度、高度]）；
d3.json（“\\abc.json”），函数（错误，json）{
如果（错误）抛出错误；
力
.nodes（json.nodes）
.links（json.links）
.start（）；
var link=svg.selectAll（“.link”）
.data（json.links）
.enter（）.append（“行”）
.attr（“class”，“link”）.style（“笔划宽度”，函数（d）{return
sqrt（d.value）；}）.style（“stroke”，函数（d）{return
填充（d值）；}）；
var node=svg.selectAll（“.node”）
.data（json.nodes）
.enter（）.append（“g”）
.attr（“类”、“节点”）
.呼叫（强制拖动）；
node.append（“圆”）
.attr（“类”、“节点”）
.attr（“r”，函数（d）{return（d.influenceScore/10）+10；
}).style（“fill”，函数（d）{返回颜色（d.type）；}）；
node.append（“文本”）
.attr（“dx”，-35）
.attr（“dy”，“4.5em”）.text（函数（d）{返回d.Name}）；
node.append（“title”）.text（函数（d）{returnd.Name；}）；
force.on（“勾号”，函数（）{
attr（“x1”，函数（d）{返回d.source.x；}）
.attr（“y1”，函数（d）{返回d.source.y；}）
.attr（“x2”，函数（d）{返回d.target.x；}）
.attr（“y2”，函数（d）{返回d.target.y；}）；
node.attr（“transform”，函数（d）{return”translate（“+d.x+”，“+d.y+”）
")"; });
});
});
我得到下面的图片

我希望目标节点（例如JJZ）在这里只出现一次（目前它的出现次数与JSON中重复的次数相同，即在给定示例中重复2次），但是连接两个节点的线的厚度应根据节点重复的次数增加。因此，连接JJZ和GJA的蓝线应比GJA和SAG厚，如果另一个节点出现5倍，则应比JJZ和GJA厚。另外，我如何在更高影响分数的方向插入定向箭头

您这里的问题与D3几乎没有关系：您可以使用纯JavaScript操纵数组

{"nodes":[{"Name":"GJA","influenceScore":81.0,"type":10.0},
{"Name":"JJZ","influenceScore":82.6,"type":30.0},
{"Name":"SAG","influenceScore":89.0,"type":30.0},
{"Name":"JJZ","influenceScore":82.6,"type":30.0}],"links":
[{"source":0,"target":0,"type":"SA","value":1},
{"source":0,"target":1,"type":"SA","value":1},
{"source":0,"target":2,"type":"SA","value":1},
{"source":0,"target":3,"type":"SA","value":1}]}
此函数根据属性
Name
查找
json.nodes
上的对象。如果它不存在，它会将对象推入一个我命名为
filtered
的数组中。如果它已经存在，则会增加该对象中的
count
值：

var filtered = []

json.nodes.forEach(function(d) {
  if (!this[d.Name]) {
    d.count = 0;
    this[d.Name] = d;
    filtered.push(this[d.Name])
  }
  this[d.Name].count += 1
}, Object.create(null))
以下是演示：

var json={“节点”：[{“名称”：“GJA”，“影响核心”：81.0，“类型”：10.0}，
{“Name”：“JJZ”，“influenceScore”：82.6，“type”：30.0}，
{“名称”：“SAG”，“影响核心”：89.0，“类型”：30.0}，
{“名称”：“JJZ”，“影响核心”：82.6，“类型”：30.0}]，“链接”：
[{“源”：0，“目标”：0，“类型”：“SA”，“值”：1}，
{“源”：0，“目标”：1，“类型”：“SA”，“值”：1}，
{“源”：0，“目标”：2，“类型”：“SA”，“值”：1}，
{“源”：0，“目标”：3，“类型”：“SA”，“值”：1}]}；
过滤的var=[]
forEach（函数（d）{
如果（！此[d.Name]）{
d、 计数=0；
此[d.Name]=d；
filtered.push（此[d.Name]）
}
此[d.Name]。计数+=1
}，Object.create（空））

console.log（过滤）
@Gerardo Furtado谢谢！用于演示如何合并节点并增加计数以反映合并了多少节点。然而，我不确定我们如何处理与每个节点的链接，因为我可以合并节点并增加计数，但我如何只保留一个描述所有已连接节点的链接merged@Pearl您不仅必须为节点使用合并的数组，还必须相应地更改链接数组，由于源/目标索引已更改。下面是一个链接数组中硬编码值的小摆设，只是为了向您展示它是如何工作的：。感谢您提供这样一个gr8解决方案！你在某个时候帮助我解决了这个问题，你能详细说明一下如何添加箭头，箭头指向影响分数从高到低的方向吗？请将此问题作为新问题发布。