- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我是 d3 的新手,并试图根据节点之间的连接数使链接的宽度动态化。比方说,我们有:
"links": [
{ "source": a, "target": b},
{ "source": a, "target": b},
{ "source": b, "target": a},
{ "source": b, "target": c}]
a和b之间有3个连接,所以宽度应该是3个像素; b和c之间有1个连接,所以宽度应该是1个像素。
代码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<script src="https://d3js.org/d3.v3.js"></script>
<script type="text/javascript" src="https://raw.githubusercontent.com/john-guerra/forceInABox/master/forceInABox.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.js"></script>
<style type="text/css">
.link {
stroke: #999;
stroke-opacity: .6;
}
.node text {
pointer-events: none;
font: 10px sans-serif;
color: black;
}
</style>
<title>OnlineQ</title>
</head>
<body>
<div id="container" class="container">
<div id="sidebar" style="display: none;">
<div class="item-group">
<label class="item-label">Filter</label>
<div id="filterContainer" class="filterContainer checkbox-interaction-group"></div>
</div>
</div>
<div id="graphContainer" class="graphContainer">
<script type="application/json" id="dataset">
{
"nodes": [
{"name":"a1","group":"Group1","type":"a","id":1,"class":"L"},
{"name":"a2","group":"Group2","type":"b","id":2,"class":"L"},
{"name":"a3","group":"Group3","type":"c","id":3,"class":"M"},
{"name":"a4","group":"Group4","type":"a","id":4,"class":"H"},
{"name":"a5","group":"Group2","type":"b","id":5,"class":"H"}
],
"links": [
{"source":0,"target":1},
{"source":0,"target":1},
{"source":1,"target":0},
{"source":2,"target":3},
{"source":4,"target":3},
{"source":4,"target":3},
{"source":4,"target":3}
]
}
</script>
<script type='text/javascript'>//<![CDATA[
//Constants for the SVG
var width = 600,
height = 600;
//Set up the colour scale
var color = d3.scale.category20();
//Set up the force layout
var force = d3.layout.forceInABox()
.charge(-120)
.linkDistance(50)
.linkStrengthInterCluster(0.001)
.gravityToFoci(0.2)
.gravityOverall(0.1)
.size([width, height])
.groupBy("group");
//Append a SVG to the body of the html page. Assign this SVG as an object to svg
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var linkedByIndex = {};
//Read the data from the dataset element
var dataset = document.getElementById('dataset').innerHTML;
graph = JSON.parse(dataset);
//Creates the graph data structure out of the json data
force.nodes(graph.nodes)
.links(graph.links)
.start();
//Create all the line svgs but without locations yet
var link = svg.selectAll(".link")
.data(graph.links)
.enter().append("line")
.attr("class", "link")
.style("stroke-width", 1)
.style("marker-end", "url(#source)") //Added ;
//Do the same with the circles for the nodes - no
var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("g")
.attr("class", function (d) {
if (d.type == "a") {
return "BA node";
} else {
return "other node";
}
})
.call(force.drag);
d3.selectAll(".BA").append("rect")
.attr("width", 10)
.attr("height", 10)
.attr("stroke", "black")
.attr("stroke-width", function(d) {
if (d.class == "L") {return 0}
if (d.class == "M") {return 1}
else {return 2}
;})
.style("fill", function (d) { return color(d.group);
});
d3.selectAll(".other").append("circle")
.attr("r", 8)
.attr("stroke", "black")
.attr("stroke-width", function(d) {
if (d.class == "L") {return 0}
if (d.class == "M") {return 1}
else {return 2}
;})
.style("fill", function (d) { return color(d.group);
});
node.append("text")
.attr("dx", 10)
.attr("dy", ".35em")
.style("stroke", "white")
.style("stroke-width", 2)
.text(function(d) { return d.name; });
node.append("text")
.attr("dx", 10)
.attr("dy", ".35em")
.text(function(d) { return d.name });
//End changed
svg.append("arrow").selectAll("marker")
.data(["source", "target"])
.enter().append("marker")
.attr("id", function(d) { return d; })
.attr("viewBox", "0 -5 10 10")
.attr("refX", 25)
.attr("refY", 0)
.attr("markerWidth", 8)
.attr("markerHeight", 8)
.attr("orient", "auto")
.append("path")
.attr("d", "M0,-5L10,0L0,5 L10,0 L0, -5")
.style("stroke", "#4679BD")
.style("opacity", "0.6");
//Now we are giving the SVGs co-ordinates - the force layout is generating the co-ordinates which this code is using to update the attributes of the SVG elements
force.on("tick", function (e) {
force.onTick(e);
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 + ")"; });
graph.links.forEach(function(d) {
linkedByIndex[d.source.index + "," + d.target.index] = 1;
linkedByIndex[d.target.index + "," + d.source.index] = 1;
});
});
function neighboring(a, b) {
return a.index == b.index || linkedByIndex[a.index + "," + b.index];
}
</script>
</div>
</div>
</body>
</html>
最佳答案
我们可以将您的原始数组更改为没有重复项的数组,并且包含原始重复项的数量。我们将使用该数字来设置链接的宽度。
所以,如果这是你的数组:
var links = [{
"source": a,
"target": b
}, {
"source": a,
"target": b
}, {
"source": b,
"target": a
}, {
"source": b,
"target": c
}];
我们先把每个对象的所有属性排序:
links.forEach(function(d) {
var sourceTemp = d.source, targetTemp = d.target;
if (d.source > d.target) {
d.source = targetTemp;
d.target = sourceTemp;
}
});
然后,我们将计算有多少链接是相等的:
var counter = {};
links.forEach(function(obj) {
var key = JSON.stringify(obj);
counter[key] = (counter[key] || 0) + 1
});
然后,我们将填充您的最终数组:
var finalArray = [];
for (var key in counter) {
var tempkey = key.substring(0, key.length - 1) + ",\"value\":" + counter[key] + "}";
finalArray.push(tempkey)
};
因为我使用 JSON.stringify
来计算重复的对象,让我们解析它:
finalArray.forEach(function(d, i, array) {
array[i] = (JSON.parse(d))
})
所以,最后,如果您记录 finalArray
,您将得到:
[
{"source": "a","target": "b","value": 3},
{"source": "b","target": "c","value": 1}
];
最后,将 finalArray
定义为链接的数据,并使用 value
设置链接的宽度:
.style("stroke-width", d => d.value)
检查此演示中的控制台,使用您的原始数组:
var links = [{
"source": "a",
"target": "b"
}, {
"source": "a",
"target": "b"
}, {
"source": "b",
"target": "a"
}, {
"source": "b",
"target": "c"
}];
links.forEach(function(d) {
var sourceTemp = d.source, targetTemp = d.target;
if (d.source > d.target) {
d.source = targetTemp;
d.target = sourceTemp;
}
});
var counter = {};
links.forEach(function(obj) {
var key = JSON.stringify(obj);
counter[key] = (counter[key] || 0) + 1
});
var finalArray = [];
for (var key in counter) {
var tempkey = key.substring(0, key.length - 1) + ",\"value\":" + counter[key] + "}";
finalArray.push(tempkey)
};
finalArray.forEach(function(d, i, array) {
array[i] = (JSON.parse(d))
})
console.log(finalArray);
关于javascript - 力导向图 - 基于节点间连接数(体积)的链接宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40997733/
我知道这个问题可能已经被问过,但我检查了所有这些,我认为我的情况有所不同(请友善)。所以我有两个数据集,第一个是测试数据集,第二个是我保存在数据框中的预测(预测值,这就是没有数据列的原因)。我想合并两
在 .loc 方法的帮助下,我根据同一数据框中另一列中的值来识别 Panda 数据框中某一列中的值。 下面给出了代码片段供您引用: var1 = output_df['Player'].loc[out
当我在 Windows 中使用 WinSCP 通过 Ubuntu 连接到 VMware 时,它提示: The server rejected SFTP connection, but it lis
我正在开发一个使用 xml web 服务的 android 应用程序。在 wi-fi 网络中连接时工作正常,但在 3G 网络中连接时失败(未找到 http 404)。 这不仅仅发生在设备中。为了进行测
我有一个XIB包含我的控件的文件,加载到 Interface Builder(Snow Leopard 上的 Xcode 4.0.2)中。 文件的所有者被设置为 someClassController
我在本地计算机上管理 MySQL 数据库,并通过运行以下程序通过 C 连接到它: #include #include #include int main(int argc, char** arg
我不知道为什么每次有人访问我网站上的页面时,都会打开一个与数据库的新连接。最终我到达了大约 300 并收到错误并且页面不再加载。我认为它应该工作的方式是,我将 maxIdle 设置为 30,这意味着
希望清理 NMEA GPS 中的 .txt 文件。我当前的代码如下。 deletes = ['$GPGGA', '$GPGSA', '$GPGSV', '$PSRF156', ] searchquer
我有一个 URL、一个用户名和一个密码。我想在 C# .Net WinForms 中建立 VPN 连接。 你能告诉我从哪里开始吗?任何第三方 API? 代码示例将受到高度赞赏... 最佳答案 您可以像
有没有更好的方法将字符串 vector 转换为字符 vector ,字符串之间的终止符为零。 因此,如果我有一个包含以下字符串的 vector "test","my","string",那么我想接收一
我正在编写一个库,它不断检查 android 设备的连接,并在设备连接、断开连接或互联网连接变慢时给出回调。 https://github.com/muddassir235/connection_ch
我的操作系统:Centos 7 + CLOUDLINUX 7.7当我尝试从服务器登录Mysql时 [root@server3 ~]# Mysql -u root -h localhost -P 330
我收到错误:Puma 发现此错误:无法打开到本地主机的 TCP 连接:9200(连接被拒绝 - 连接(2)用于“本地主机”端口 9200)(Faraday::ConnectionFailed)在我的
请给我一些解决以下错误的方法。 这是一个聊天应用....代码和错误如下:: conversations_controller.rb def create if Conversation.bet
我想将两个单元格中的数据连接到一个单元格中。我还想只组合那些具有相同 ID 的单元格。 任务 ID 名称 4355.2 参与者 4355.2 领袖 4462.1 在线 4462.1 快速 4597.1
我经常需要连接 TSQL 中的字段... 使用“+”运算符时 TSQL 强制您处理的两个问题是 Data Type Precedence和 NULL 值。 使用数据类型优先级,问题是转换错误。 1)
有没有在 iPad 或 iPhone 应用程序中使用 Facebook 连接。 这个想法是登录这个应用程序,然后能够看到我的哪些 facebook 用户也在使用该应用程序及其功能。 最佳答案 是的。
我在连接或打印字符串时遇到了一个奇怪的问题。我有一个 char * ,可以将其设置为字符串文字的几个值之一。 char *myStrLiteral = NULL; ... if(blah) myS
对于以下数据 - let $x := "Yahooooo !!!! Select one number - " let $y := 1 2 3 4 5 6 7 我想得到
我正在看 UDEMY for perl 的培训视频,但是视频不清晰,看起来有错误。 培训展示了如何使用以下示例连接 2 个字符串: #!usr/bin/perl print $str = "Hi";
我是一名优秀的程序员,十分优秀!