在d3中,我如何通过点击来改变一个节点的形状
In d3 force directed, how do I change a nodes shape by clicking on it?
我在d3中有一个力定向图,并希望能够点击圆形节点并使它们变成矩形。然后如果我点击一个矩形,我想让它恢复为圆形。
我已经看过这个和有关SO的相关问题,但我认为它们适用于D3的早期版本,不适合我。
我可以让它,所以我的圆圈的大小和颜色将改变点击,并与以下代码,我可以有圆圈节点替换为黑色矩形,但它不附加到图形,只是一个黑色的正方形上的svg。
node.on("click", function(d,i) {
var size = 20;
d3.select(this).remove();
svg.append("rect")
.attr("x", d.x)
.attr("y", d.y)
.attr("height", size)
.attr("width", size)
.style("fill", function(d) {
return color( d.group);
});
})
谁能告诉我我错过了什么?我怀疑rect
没有附在图形数据上,但我对d3不够熟悉,无法理解我应该改变什么。谢谢你! 当你说:
我看过这个和有关SO的相关问题,但我认为它们适用于D3的早期版本,不适合我。
在我看来,这个答案中没有任何东西表明它不会在D3 v4.x中工作。值得一提的是,在您链接的答案(和问题)中,node
是一个群元素,因此this
指的是群,而不是圆/矩形。
继续,一个可能的解决方案(不涉及删除和添加元素)是用矩形模拟圆:
node.append("rect")
.attr("width", 16)
.attr("height", 16)
.attr("rx", 8)
.attr("ry", 8)
在点击功能内部,改变rx
和ry
:
function click() {
if(d3.select(this).attr("rx") == 8){
d3.select(this).attr("rx", 0).attr("ry", 0);
} else {
d3.select(this).attr("rx", 8).attr("ry", 8);};
};
下面是一个示例:
var nodes = [
{"id": 1},
{"id": 2},
{"id": 3},
{"id": 4},
{"id": 5},
{"id": 6},
{"id": 7},
{"id": 8},
{"id": 9},
{"id": 10},
{"id": 11},
{"id": 12}
];
var links = [
{source: 1, target: 8},
{source: 1, target: 3},
{source: 1, target: 4},
{source: 1, target: 9},
{source: 1, target: 10},
{source: 1, target: 11},
{source: 2, target: 5},
{source: 2, target: 6},
{source: 2, target: 7},
{source: 2, target: 12},
{source: 2, target: 4},
{source: 2, target: 8},
{source: 6, target: 7},
{source: 6, target: 8},
{source: 6, target: 9},
{source: 6, target: 5},
{source: 6, target: 3},
{source: 6, target: 9},
]
var index = 10;
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height"),
node,
link;
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) { return d.id; }))
.force("charge", d3.forceManyBody())
.force("collide", d3.forceCollide(30))
.force("center", d3.forceCenter(width / 2, height / 2));
update();
function update() {
link = svg.selectAll(".link")
.data(links, function(d) { return d.target.id; })
link = link.enter()
.append("line")
.attr("class", "link");
node = svg.selectAll(".node")
.data(nodes, function(d) { return d.id; })
node = node.enter()
.append("g")
.attr("class", "node");
node.append("rect")
.attr("width", 16)
.attr("height", 16)
.attr("rx", 8)
.attr("ry", 8)
.attr("fill", "teal")
.on("click", click);
simulation
.nodes(nodes)
.on("tick", ticked);
simulation.force("link")
.links(links);
}
function click() {
if(d3.select(this).attr("rx") == 8){d3.select(this).attr("rx", 0).attr("ry", 0);}
else{d3.select(this).attr("rx", 8).attr("ry", 8);};
}
function ticked() {
link
.attr("x1", function(d) { return d.source.x + 8; })
.attr("y1", function(d) { return d.source.y + 8; })
.attr("x2", function(d) { return d.target.x+ 8; })
.attr("y2", function(d) { return d.target.y+ 8; });
node
.attr("transform", function(d) { return "translate(" + d.x + ", " + d.y + ")"; });
}
.link {
stroke: #aaa;
}
.node {
stroke: none;
stroke-width: 40px;
}
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="400" height="300"></svg>
相关文章:
- 如果某个值在另一个节点中,我如何每秒自动单击一个链接
- XPath以基于另一个节点按位置选择节点's的位置
- 如何以编程方式在 jsTree 中选择一个节点并打开所有父节点
- 在每个循环上完成异步调用,然后转到下一个节点 js
- 如何根据另一个节点中的数据对 Firebase 阵列进行排序
- 使用Javascript在XML文件中的节点中获取一个节点
- Dynatree仅展开树的最后一个节点
- 在D3JS中拖放并修复一个节点
- 如何使用webkit浏览器在一个范围内选择一个节点
- 如何在 Sigma JS 中居中一个节点
- 节点 js 从客户端和另一个节点模块调用相同的延迟函数
- jQuery .each()、.find() 和 .append() 只在最后一个节点上工作
- 如何承诺一个节点.js插件方法
- 下一个节点.js中的刻度错误
- 如何检查新克隆的节点是否是javascript中的最后一个节点
- 使用 node.js 启动另一个节点应用程序
- Jquery - 如何在 drupal 视图中只影响一个节点
- 如何正确地要求一个节点模块,导出其中的所有函数
- 循环遍历一个节点数组并在每个节点上附加一个子节点只会附加到最后一个元素
- jsTree 3-选择动态加载树的下一个/上一个节点