D3通过点击扩展力量网络 - 不工作

时间：2017-03-25 19:25:02

标签： javascript d3.js

我有以下简单的图形可视化：

sample graph

首先，只显示'n1'连接到其邻居'n2'

其次，点击'n2'后，网络通过添加两条边'n2' - >'n3'和'n2' - ＆gt;'n4'

进行扩展

第三，点击'n3'后，网络通过添加两条边'n3' - ＆gt;'n1'和'n3' - ＆gt;'n5'进行扩展。

为此，我想我可以创建一个可见的节点数组。通过单击节点，此节点名称将添加到数组中。然后在tick（）函数中，该数组中的可见节点将用于设置网络。

但是当我使用以下代码执行此操作时：

// return currently visible nodes as the source nodes
// e.g. called by
// var visible_seeds = seeding(nodes);
//
function seeding(nodes){
    var visible = [];
    nodes.forEach(function(n){
        if(n.name=='n1')
        visible.push(n);
    });
    return visible;
}

然后调用上述函数如下：

var visible_seeds = seeding(nodes);

var force = d3.layout.force()
.nodes(d3.values(visible_seeds))
.links(links)
.size([width, height])
.linkDistance(60)
.charge(-300)
.on("tick", tick)
.start();

它给出错误

  

index.html TypeError：'undefined'不是函数（评估'nodes.forEach（function（n）{...'）

实现目标的正确方法是什么？谢谢你!!!!

P.S。我是D3和javascript的新手。

D3读入的数据来自csv文件：

source,target,value
n1,n2,1.0
n2,n3,1.0
n2,n4,1.0
n3,n1,1.0
n3,n5,1.0

我的代码基于以下示例： http://bl.ocks.org/d3noob/5155181

已添加 - 源代码 - 问题发生在功能播种（）

中 
<!DOCTYPE html>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.js"></script>
<style>

path.link {
  fill: none;
  stroke: #666;
  stroke-width: 1.5px;
}

path.link.twofive {
  opacity: 0.25;
}

path.link.fivezero {
  opacity: 0.50;
}

path.link.sevenfive {
  opacity: 0.75;
}

path.link.onezerozero {
  opacity: 1.0;
}

circle {
  fill: #ccc;
  stroke: #fff;
  stroke-width: 1.5px;
}

text {
  fill: #000;
  font: 10px sans-serif;
  pointer-events: none;
}

</style>
<body>
<script>


// get the data
d3.csv("force.csv", function(error, links) {

var nodes = {};

// Compute the distinct nodes from the links.
links.forEach(function(link) {
    link.source = nodes[link.source] || (nodes[link.source] = {name: link.source, vis:0});
    link.target = nodes[link.target] || (nodes[link.target] = {name: link.target, vis:0});
    link.value = +link.value;
});

//nodes["n1"] = {name:"n1", vis:1};
var vis = ['n1'];

var width = 960,
    height = 500;

function seeding(){
 var visible = [];
 nodes.forEach(function(n){
     if(n.name=='n1')
        visible.push(n);
 });
 return visible;
}

var visible_seeds = seeding();

var force = d3.layout.force()
    .nodes(d3.values(visible_seeds))
    //.nodes(d3.values(nodes))
    .links(links)
    .size([width, height])
    .linkDistance(60)
    .charge(-300)
    .on("tick", tick)
    .start();

// Set the range
var  v = d3.scale.linear().range([0, 100]);

// Scale the range of the data
v.domain([0, d3.max(links, function(d) { return d.value; })]);

// asign a type per value to encode opacity
links.forEach(function(link) {
    if (v(link.value) <= 25) {
        link.type = "twofive";
    } else if (v(link.value) <= 50 && v(link.value) > 25) {
        link.type = "fivezero";
    } else if (v(link.value) <= 75 && v(link.value) > 50) {
        link.type = "sevenfive";
    } else if (v(link.value) <= 100 && v(link.value) > 75) {
        link.type = "onezerozero";
    }
});

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

// build the arrow.
svg.append("svg:defs").selectAll("marker")
    .data(["end"])      // Different link/path types can be defined here
  .enter().append("svg:marker")    // This section adds in the arrows
    .attr("id", String)
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", 15)
    .attr("refY", -1.5)
    .attr("markerWidth", 6)
    .attr("markerHeight", 6)
    .attr("orient", "auto")
  .append("svg:path")
    .attr("d", "M0,-5L10,0L0,5");

// add the links and the arrows
var path = svg.append("svg:g").selectAll("path")
    .data(force.links())
  .enter().append("svg:path")
    .attr("class", function(d) { return "link " + d.type; })
    .attr("marker-end", "url(#end)");

// define the nodes
var node = svg.selectAll(".node")
    .data(force.nodes())
  .enter().append("g")
    .attr("class", "node")
    .on("click", click)
    .on("dblclick", dblclick)
    .call(force.drag);

// add the nodes
node.append("circle")
    .attr("r", 5);

// add the text 
node.append("text")
    .attr("x", 12)
    .attr("dy", ".35em")
    .text(function(d) { return d.name; });

// add the curvy lines
function tick() {
    path.attr("d", function(d) {
        var dx = d.target.x - d.source.x,
            dy = d.target.y - d.source.y,
            dr = Math.sqrt(dx * dx + dy * dy);
        return "M" + 
            d.source.x + "," + 
            d.source.y + "A" + 
            dr + "," + dr + " 0 0,1 " + 
            d.target.x + "," + 
            d.target.y;
    });

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

// action to take on mouse click
function click() {
    d3.select(this).select("text").transition()
        .duration(750)
        .attr("x", 22)
        .style("fill", "steelblue")
        .style("stroke", "lightsteelblue")
        .style("stroke-width", ".5px")
        .style("font", "20px sans-serif");
    d3.select(this).select("circle").transition()
        .duration(750)
        .attr("r", 16)
        .style("fill", "lightsteelblue");
}

// action to take on mouse double click
function dblclick() {
    d3.select(this).select("circle").transition()
        .duration(750)
        .attr("r", 6)
        .style("fill", "#ccc");
    d3.select(this).select("text").transition()
        .duration(750)
        .attr("x", 12)
        .style("stroke", "none")
        .style("fill", "black")
        .style("stroke", "none")
        .style("font", "10px sans-serif");
}

});

</script>
</body>
</html>

1 个答案:

答案 0 :(得分：0)

首先，您的错误来源是因为nodes是一个JavaScript对象（不是数组），它没有forEach方法。

其次，我不知道你的方法在哪里。你用一个节点开始强制布局，然后是什么？点击你附加其他节点？你将如何处理这些链接？

Intead，我建议只需切换点击时节点和链接的可见性。这是一个快速实施：

＆＃13;
＆＃13; 
<!DOCTYPE html>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.js"></script>
<style>

path.link {
  fill: none;
  stroke: #666;
  stroke-width: 1.5px;
}

path.link.twofive {
  opacity: 0.25;
}

path.link.fivezero {
  opacity: 0.50;
}

path.link.sevenfive {
  opacity: 0.75;
}

path.link.onezerozero {
  opacity: 1.0;
}

circle {
  fill: #ccc;
  stroke: #fff;
  stroke-width: 1.5px;
}

text {
  fill: #000;
  font: 10px sans-serif;
  pointer-events: none;
}

</style>
<body>
<script>


// get the data
//d3.csv("force.csv", function(error, links) {

var links = [{"source":"n1","target":"n2","value":"1.0"},{"source":"n2","target":"n3","value":"1.0"},{"source":"n2","target":"n4","value":"1.0"},{"source":"n3","target":"n1","value":"1.0"},{"source":"n3","target":"n5","value":"1.0 "}];

var nodes = {};

// Compute the distinct nodes from the links.
links.forEach(function(link) {
    link.source = nodes[link.source] || (nodes[link.source] = {name: link.source, vis:0});
    link.target = nodes[link.target] || (nodes[link.target] = {name: link.target, vis:0});
    link.value = +link.value;
});

//nodes["n1"] = {name:"n1", vis:1};
var vis = ['n1'];

var width = 300,
    height = 300;

for (key in nodes){
  var node = nodes[key];
  node.visible = (node.name === 'n1');
}

var force = d3.layout.force()
    .nodes(d3.values(nodes))
    .links(links)
    .size([width, height])
    .linkDistance(60)
    .charge(-300)
    .on("tick", tick)
    .start();

// Set the range
var  v = d3.scale.linear().range([0, 100]);

// Scale the range of the data
v.domain([0, d3.max(links, function(d) { return d.value; })]);

// asign a type per value to encode opacity
links.forEach(function(link) {
    if (v(link.value) <= 25) {
        link.type = "twofive";
    } else if (v(link.value) <= 50 && v(link.value) > 25) {
        link.type = "fivezero";
    } else if (v(link.value) <= 75 && v(link.value) > 50) {
        link.type = "sevenfive";
    } else if (v(link.value) <= 100 && v(link.value) > 75) {
        link.type = "onezerozero";
    }
});

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

// build the arrow.
svg.append("svg:defs").selectAll("marker")
    .data(["end"])      // Different link/path types can be defined here
  .enter().append("svg:marker")    // This section adds in the arrows
    .attr("id", String)
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", 15)
    .attr("refY", -1.5)
    .attr("markerWidth", 6)
    .attr("markerHeight", 6)
    .attr("orient", "auto")
  .append("svg:path")
    .attr("d", "M0,-5L10,0L0,5");

// add the links and the arrows
var path = svg.append("svg:g").selectAll("path")
    .data(force.links())
  .enter().append("svg:path")
    .attr("class", function(d) { return "link " + d.type; })
    .attr("marker-end", "url(#end)")
    .style("opacity", function(d){
      return d.target.visible && d.source.visible ? 1 : 0;
    })

// define the nodes
var node = svg.selectAll(".node")
    .data(force.nodes())
  .enter().append("g")
    .attr("class", "node")
    .style("opacity", function(d){
      return d.visible ? 1 : 0;
    })
    .on("click", click)
    .call(force.drag);

// add the nodes
node.append("circle")
    .attr("r", 5);

// add the text 
node.append("text")
    .attr("x", 12)
    .attr("dy", ".35em")
    .text(function(d) { return d.name; });

// add the curvy lines
function tick() {
    path.attr("d", function(d) {
        var dx = d.target.x - d.source.x,
            dy = d.target.y - d.source.y,
            dr = Math.sqrt(dx * dx + dy * dy);
        return "M" + 
            d.source.x + "," + 
            d.source.y + "A" + 
            dr + "," + dr + " 0 0,1 " + 
            d.target.x + "," + 
            d.target.y;
    });

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

// action to take on mouse click
function click(d0) {
  links.forEach(function(d1){
    console.log(d0, d1.source)
    if (d1.source === d0) {
      d1.target.visible = !d1.target.visible;
    }
  });
  node.style("opacity", function(d){
    return d.visible ? 1 : 0;
  });
  path.style("opacity", function(d){
    return d.target.visible && d.source.visible ? 1 : 0;
  });
}

//});

</script>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题