Question

enter code here我有一个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}]}

我是d3novice，所以希望得到专家的一些帮助我的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 + 
 ")"; });
   });
  });

我收到以下图片

我希望目标节点例如JJZ在这里发生一次（当前它发生的次数与在JSON中重复的次数相同，即在给定示例中重复2次）但是连接两者的线路节点的厚度应根据节点重复的次数而增加。所以连接JJZ和GJA的蓝线应该比GJA和SAG厚，如果另一个节点发生5次，那么应该比JJZ和GJA厚。另外，如何在更高影响力分数的方向插入有向箭头

Answer 1

这里你的问题与D3没什么关系：你可以使用普通的JavaScript操作你的数组。

此函数根据属性json.nodes查找Name上的对象。如果它不存在，它会将对象推送到我命名为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 = {"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}]};

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))

console.log(filtered)

然后，您只需使用属性count设置链接的stroke-width。

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

1 个答案: