Javascript D3通过单击扩展力网络-不工作_Javascript_D3.js

Javascript D3通过单击扩展力网络-不工作

javascript d3.js

Javascript D3通过单击扩展力网络-不工作,javascript,d3.js,Javascript,D3.js,我有以下简单的图形可以可视化：首先，仅显示“n1”连接到其邻居“n2” 其次，单击“n2”后，网络将通过添加两条边“n2”->“n3”和“n2”->“n4”来扩展第三，单击“n3”后，网络通过添加两条边“n3”->“n1”和“n3”->“n5”进行扩展为此，我想我可以创建一个可见的节点数组。通过单击节点，此节点名称将添加到数组中。然后在tick（）函数中，该数组中的可见节点将用于设置网络但当我使用以下代码执行此操作时： // return currently visible nodes

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

首先，仅显示“n1”连接到其邻居“n2”

其次，单击“n2”后，网络将通过添加两条边“n2”->“n3”和“n2”->“n4”来扩展

第三，单击“n3”后，网络通过添加两条边“n3”->“n1”和“n3”->“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:“未定义”不是函数（计算“nodes.forEach（函数（n）{…”）

实现我的目标的正确方法是什么？谢谢大家

p、我对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

我的代码基于以下示例：

添加-源代码-问题发生在函数播种（）中


路径链接{
填充：无；
行程：#666；
笔划宽度：1.5px；
}
path.link.two5{
不透明度：0.25；
}
path.link.fivezero{
不透明度：0.50；
}
path.link.seven5{
不透明度：0.75；
}
path.link.onezero{
不透明度：1.0；
}
圈{
填充：#ccc；
冲程：#fff；
笔划宽度：1.5px；
}
正文{
填写：#000；
字体：10px无衬线；
指针事件：无；
}
//获取数据
d3.csv（“force.csv”，函数（错误，链接）{
var节点={}；
//从链接计算不同的节点。
links.forEach（函数（link）{
link.source=节点[link.source]| |（节点[link.source]={name:link.source，vis:0}）；
link.target=节点[link.target]| |（节点[link.target]={name:link.target，vis:0}）；
link.value=+link.value；
});
//节点[“n1”]={name:“n1”，vis:1}；
var-vis=['n1']；
可变宽度=960，
高度=500；
函数播种（）{
可见var=[]；
nodes.forEach（函数（n）{
如果（n.name='n1'）
可见。推（n）；
});
返回可见；
}
var visible_seeds=播种（）；
var-force=d3.layout.force（）
.节点（d3.值（可见种子））
//.节点（d3.值（节点））
.链接（links）
.尺寸（[宽度、高度]）
.linkDistance（60）
。收费（-300）
.on（“滴答”，滴答）
.start（）；
//设定范围
var v=d3.scale.linear（）范围（[0100]）；
//缩放数据的范围
v、 域（[0，d3.max（链接，函数（d）{返回d.value；}）]；
//为每个值指定一个类型以编码不透明度
links.forEach（函数（link）{
如果（v（link.value）首先，错误的来源是因为节点
是一个JavaScript对象（不是数组），它没有forEach
方法
第二，我不确定你的方法要去哪里。你用一个节点开始force布局，然后呢？点击后附加其他节点？你将如何处理链接
Intead，我建议只需在单击时切换节点和链接的可见性。下面是一个快速实现：


路径链接{
填充：无；
行程：#666；
笔划宽度：1.5px；
}
path.link.two5{
不透明度：0.25；
}
path.link.fivezero{
不透明度：0.50；
}
path.link.seven5{
不透明度：0.75；
}
path.link.onezero{
不透明度：1.0；
}
圈{
填充：#ccc；
冲程：#fff；
笔划宽度：1.5px；
}
正文{
填写：#000；
字体：10px无衬线；
指针事件：无；
}
//获取数据
//d3.csv（“force.csv”，函数（错误，链接）{
var links=[{“源”：“n1”，“目标”：“n2”，“值”：“1.0”}，{“源”：“n2”，“目标”：“n3”，“值”：“1.0”}，{“源”：“n2”，“目标”：“n4”，“值”：“1.0”}，{“源”：“n3”，“目标”：“n1”，“值”：“1.0”}，{“源”：“n3”，“目标”：“n5”，“值”：“1.0”}）；
var节点={}；
//从链接计算不同的节点。
links.forEach（函数（link）{
link.source=节点[link.source]| |（节点[link.source]={name:link.source，vis:0}）；
link.target=节点[link.target]| |（节点[link.target]={name:link.target，vis:0}）；
link.value=+link.value；
});
//节点[“n1”]={name:“n1”，vis:1}；
var-vis=['n1']；
可变宽度=300，
高度=300；
用于（输入节点）{
var节点=节点[键]；
node.visible=（node.name=='n1'）；
}
var-force=d3.layout.force（）
.节点（d3.值（节点））
.链接（links）
.尺寸（[宽度、高度]）
.linkDistance（60）
。收费（-300）
.on（“滴答”，滴答）
.start（）；
//设定范围
var v=d3.scale.linear（）范围（[0100]）；
//缩放数据的范围
v、 域（[0，d3.max（链接，函数（d）{返回d.value；}）]；
//为每个值指定一个类型以编码不透明度
links.forEach（函数（link）{
如果（v（link.value）TypeError:“未定义”不是函数
表示节点不是JavaScript数组。如果是d3
选择，请尝试节点。每个（函数…），否则您需要向我们显示更多代码。谢谢您的评论！问题中添加了代码。谢谢Mark，您几乎解决了问题。我想要的是增量显示（通过展开）图。想象一下，不仅有5个节点，还有5000个节点-计算它们可能都很慢，所以我想从一个节点开始。单击它，我们将加载其相邻节点，当然还有它们之间的链接。单击其中一个相邻节点将添加新的相邻节点和边，依此类推。
<!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>