个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
下面是一个“有效”的 D3 动画。
子节点在鼠标单击时成功消失...但是，添加了重复节点(“圆圈”)。如果您尝试运行以下代码，然后折叠和打开节点，您将看到节点出现在其他节点之上!
在 chrome-inspection 中也可以看到 circle-elements 的重复。
只是简单的折叠和打开是我们在这里所追求的。非常感谢您的帮助 !谢谢。
(忽略节点标签——它们不重要)
<html>
<head>
<style>
.node {
cursor: pointer;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
.node .text {
fill: white;
}
.ORG .circle {
fill: #1d3649;
}
.EMR .circle {
fill: #B2D0F5;
stroke: #5596e6;
stroke-dasharray: 3px, 3px;
opacity: .5;
}
.EMR .circle:hover {
fill: #5596e6;
}
.link {
fill: none;
stroke: #eee;
stroke-width: 1.5px;
font: 10px sans-serif;
}
.link.active {
stroke: #ddd;
stroke-width: 2;
}
.arrow {
fill: #666;
}
.arrow.active {
stroke-width: 0 !important;
}
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var dataset = {
"nodes": [{
"id": 223,
"type": "Parent",
"properties": {
}
}, {
"id": 136525,
"type": "Child",
"properties": {
"patient": "6090",
"batch": "70"
}
}, {
"id": 146525,
"type": "Child",
"properties": {
"patient": "6090",
"batch": "70"
}
}, {
"id": 156525,
"type": "Child",
"properties": {
"patient": "6090",
"batch": "70"
}
}, {
"id": 166525,
"type": "Child",
"properties": {
"patient": "6090",
"batch": "70"
}
}, {
"id": 176525,
"type": "Child",
"properties": {
"patient": "6090",
"batch": "70"
}
}, {
"id": 136448,
"type": "Child",
"properties": {
"patient": "6094",
"batch": "70"
}
}, {
"id": 136328,
"type": "Child",
"properties": {
"patient": "6082",
"batch": "70"
}
}, {
"id": 136305,
"type": "Child",
"properties": {
"patient": "6096",
"batch": "70"
}
}, {
"id": 136303,
"type": "Child",
"properties": {
"patient": "6093",
"batch": "70"
}
}, {
"id": 136299,
"type": "Child",
"properties": {
"patient": "6091",
"batch": "70"
}
}, {
"id": 136261,
"type": "Child",
"properties": {
"patient": "6089",
"batch": "70"
}
}, {
"id": 136212,
"type": "Child",
"properties": {
"patient": "6087",
"batch": "70"
}
}, {
"id": 136115,
"type": "Child",
"properties": {
"patient": "6078",
"batch": "70"
}
}, {
"id": 136113,
"type": "Child",
"properties": {
"patient": "6088",
"batch": "70"
}
}, {
"id": 135843,
"type": "Child",
"properties": {
"patient": "6072",
"batch": "70"
}
}, {
"id": 555,
"type": "Grandchild",
"properties": {
}
}],
"edges": [{
"id": 0,
"from": 136113,
"to": 555,
"properties": {
}
},{
"id": 0,
"from": 136525,
"to": 555,
"properties": {
}
},{
"id": 0,
"from": 146525,
"to": 555,
"properties": {
}
},{
"id": 0,
"from": 156525,
"to": 555,
"properties": {
}
},{
"id": 0,
"from": 166525,
"to": 136448,
"properties": {
}
},{
"id": 0,
"from": 176525,
"to": 223,
"properties": {
}
},{
"id": 0,
"from": 223,
"to": 136525,
"properties": {
}
}, {
"id": 0,
"from": 223,
"to": 136448,
"properties": {
}
}, {
"id": 0,
"from": 223,
"to": 136328,
"properties": {
}
}, {
"id": 0,
"from": 223,
"to": 136305,
"properties": {
}
}, {
"id": 0,
"from": 136525,
"to": 136303,
"properties": {
}
}, {
"id": 0,
"from": 223,
"to": 136299,
"properties": {
}
}, {
"id": 0,
"from": 223,
"to": 136261,
"properties": {
}
}, {
"id": 0,
"from": 223,
"to": 136212,
"properties": {
}
}, {
"id": 0,
"from": 223,
"to": 136115,
"properties": {
}
}, {
"id": 0,
"from": 223,
"to": 136113,
"properties": {
}
}, {
"id": 0,
"from": 223,
"to": 135843,
"properties": {
}
}]
}
var width = 0.975 * $(window).width(),
height = 0.95 * $(window).height();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var force = d3.layout.force()
.size([width, height])
//gravity(0.2)
.linkDistance(height / 6)
.charge(function(node) {
if (node.type !== 'ORG') return -2000;
return -30;
});
// 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", function(d) {
return d;
})
.attr("viewBox", "0 -5 10 10")
.attr("refX", 12)
.attr("refY", 0)
.attr("markerWidth", 9)
.attr("markerHeight", 5)
.attr("orient", "auto")
.attr("class", "arrow")
.append("svg:path")
.attr("d", "M0,-5L10,0L0,5");
var json = dataset;
var edges = [];
json.edges.forEach(function(e) {
var sourceNode = json.nodes.filter(function(n) {
return n.id === e.from;
})[0],
targetNode = json.nodes.filter(function(n) {
return n.id === e.to;
})[0];
edges.push({
source: sourceNode,
target: targetNode,
value: e.id
});
});
var colors = {};
colors[23] = "lightblue";
colors[25] = "lightgreen";
colors[48] = "lightyellow";
colors[28] = "lightblue";
colors[5] = "lightgreen";
colors[3] = "lightyellow";
colors[99] = "lightblue";
colors[61] = "lightgreen";
colors[12] = "lightyellow";
for(var i=0; i<json.nodes.length; i++) {
json.nodes[i].collapsing = 0;
json.nodes[i].collapsed = false;
json.nodes[i].radius = json.nodes[i].id % 100;
if(colors[json.nodes[i].radius] != undefined)
json.nodes[i].color = colors[json.nodes[i].radius];
else
json.nodes[i].color = "lightbrown";
}
var link = svg.selectAll(".link");
var node = svg.selectAll(".node");
force.on("tick", function() {
// make sure the nodes do not overlap the arrows
link.attr("d", function(d) {
// Total difference in x and y from source to target
diffX = d.target.x - d.source.x;
diffY = d.target.y - d.source.y;
// Length of path from center of source node to center of target node
pathLength = Math.sqrt((diffX * diffX) + (diffY * diffY));
// x and y distances from center to outside edge of target node
offsetX = (diffX * d.target.radius) / pathLength;
offsetY = (diffY * d.target.radius) / pathLength;
return "M" + d.source.x + "," + d.source.y + "L" + (d.target.x - offsetX) + "," + (d.target.y - offsetY);
});
node.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
});
update();
function update(){
var nodes = json.nodes.filter(function(d) {
return d.collapsing == 0;
});
var links = edges.filter(function(d) {
return d.source.collapsing == 0 && d.target.collapsing == 0;
});
link = svg.selectAll(".link").data(links);
link.exit().remove();
link.enter().append("path")
.attr("class", "link")
.attr("marker-end", "url(#end)");
node = svg.selectAll(".node").data(nodes);
node.exit().remove();
node.enter().append("g")
.attr("class", function(d) {
return "node " + d.type
});
node.append("circle")
.attr("class", "circle")
.attr("r", function(d) {
//d.radius = 30;
return d.radius
})
.attr("fill", function(d) {
//d.radius = 30;
return d.color;
})
.attr("stroke", function(d) {
//d.radius = 30;
return "darkgray";
});
// return a radius for path to use
node.append("text")
.attr("x", 0)
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.attr("class", "text")
.text(function(d) {
return d.type
});
// On node hover, examine the links to see if their
// source or target properties match the hovered node.
node.on('mouseover', function(d) {
link.attr('class', function(l) {
if (d === l.source || d === l.target)
return "link active";
else
return "link inactive";
});
});
// Set the stroke width back to normal when mouse leaves the node.
node.on('mouseout', function() {
link.attr('class', "link");
})
.on('click', click);
/** this is NOT the problem **/
function click(d) {
if (!d3.event.defaultPrevented) {
var inc = d.collapsed ? -1 : 1;
recurse(d);
function recurse(sourceNode){
//check if link is from this node, and if so, collapse
edges.forEach(function(l) {
if (l.source.id === sourceNode.id){
l.target.collapsing += inc;
recurse(l.target);
}
});
}
d.collapsed = !d.collapsed;
}
update();
}
force
.nodes(nodes)
.links(links)
.start();
}
</script>
</body>
</html>最佳答案
问题出在这里:
node.enter().append("g")...
node.append("circle")...
node.append("text")...
虽然您将组添加到 enter 选择中，但您将圆圈和文本添加到作为过渡元素的 node 选择中
尝试:
var nodeEnter = node.enter().append("g")...
nodeEnter.append("circle")...
nodeEnter.append("text")...
在这种情况下，nodeEnter 将等于链中最后创建的元素，在这种情况下是 g 元素。
关于d3.js - 防止 D3 在更新时添加重复项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41699724/
25
4
0
我想知道如何考虑需要您做出某些选择才能看到最终结果的搜索系统。我说的是 select 表单，您可以在其中根据您的选择继续操作，然后您会看到结果。 下面描述了我正在谈论的一个随机示例。想象一下 Init
您好，我目前正在编写一些软件来管理我们的库存。我搜索了 2 个表 master_stock(保存每一个股票代码和描述)库存(保存库存代码、地点、数量...) 一切都很好，但这是我遇到的问题。 假设我的
我有 2 个表，我想合并其数据。id 是我的关键字段(增量且不同)。表1和表2字段说明例如:id - 名称 - 值 我想将表2的所有数据插入表1，它们有不同的数据，但在某些行中有相同的id。 所以当我
我正在努力解决汇编中的一个问题，我必须获取十六进制代码的第一个字节 (FF) 并将其复制到整个值中: 0x045893FF input 0xFFFFFFFF output 我所做的
我有 Eclipse Indigo 版本，我可以在其中运行 Java 和 C++ 项目。 但我只想使用另一个 Eclipse 来编写 C++ 项目。所以我将 eclipse(不是工作区)的源文件夹复制
This question already has answers here: What is a NullPointerException, and how do I fix it? (12个答案)
This question already has answers here: Numbering rows within groups in a data frame (8个答案) 5个月前关闭。
我知道用q记录到寄存器中，但我想知道是否可以设置一些东西来快速调用最后一个记录，就像一样。 回顾最后一个简短的编辑命令(有关 的讨论请参阅 here。)。 我知道@@，但它似乎只有在执行@z之后才起作
来自 Eclipse 并且一直习惯于复制行，发现 Xcode 没有这样的功能是很奇怪的。或者是吗？ 我知道可以更改系统范围的键绑定(bind)，但这不是我想要的。 最佳答案 要删除一行:Ctrl-A
假设我有一个包含元素的列表，例如[1,2,3,4,5,6,7,8]。我想创建长度为 N 的该元素的所有排列。 因此，对于N = 4，它将是[[1,1,1,1],[1,1,1,2],[1,1,2,1],
我有一个带有 JMenu 的 JFrame。当我在某些情况下添加包含图像的 JPanel 时，程序首次启动时菜单会重复。调整大小时重复的菜单消失。任何建议都非常感激。谢谢。代码如下: public c
我正在尝试查找目录中文件的重复项。 我对这个 block 有一个问题，它以文件地址作为参数: public void findFiles(ArrayList list){ HashMap hm
我知道这个问题已经发布并且已经给出了答案，但我的情况不同，因为我在单个方法上填充多个下拉列表，所以如果我点击此链接 After every postback dropdownlist items re
我正在尝试为我的日历应用程序实现重复模式。我希望它的工作方式与 Outlook 在您设置重复约会时的工作方式相同。 public async Task> ApplyReccurrencePeriod
我有一个利用 cookie 来支持准向导的应用程序(即，它是一组相互导航的页面，它们必须以特定顺序出现以进行注册)。 加载 Logon.aspx 页面时 - 默认页面 - 浏览器 cookie 看起来
我有 3 个输入，代码检查它们是否为空，如果为空，则将变量值添加到输入中。 所以我有 3 个具有值的变量: var input1text = "something here"; var input2t
根据数组的长度更改数组的每个元素的最佳方法是什么？ 例如: User #1 input = "XYZVC" Expected Output = "BLABL" User #2 input = "XYZ
我在让 Algolia 正常工作时遇到了一些麻烦。我正在使用 NodeJS 并尝试在我的数据库和 Algolia 之间进行一些同步，但由于某种原因似乎随机弹出大量重复项。 如您所见，在某些情况下，会弹
遵循以下规则: expr: '(' expr ')' #exprExpr | expr ( AND expr )+ #exprAnd | expr ( OR expr )+ #exprO
我有一个布局，我想从左边进入并停留几秒钟，然后我希望它从右边离开。为此，我编写了以下代码: 这里我在布局中设置数据: private void loadDoctor(int doctorsInTheL
我是一名优秀的程序员,十分优秀！