Javascript 捕获/保存d3.js可视化的当前状态

我是D3的新手，我希望构建一个简单的艺术应用程序，允许用户在自定义背景上放置D3数据点，在这个过程中创建艺术

是否可以在用户删除每个D3节点后保存其位置，以便在重新加载页面时，所有节点都将迁移回其位置

---

非常感谢您的帮助！谢谢大家!

我不知道D3中有一个持久性库，所以您可能需要以自己的方式持久化

如果您只关心位置，那么您只需要创建一个位置数组，即

var positions=[{x:x1，y:y1}，{x:x2，y:y2}，…]

，并且您可以选择将此数据发送到服务器，或者如果您只需要在特定的浏览器上持久化，则可以将其持久化到浏览器的本地存储中，例如

// persist
window.localStorage.setItem('positions',JSON.stringify(positions));

// When the page is loaded
var positions = JSON.parse(window.localStorage.getItem('positions'));

---

然后，您可以使用这些位置重新绘制所有节点。

您没有提到使用哪种d3布局。无论如何，只要收集绑定到节点和链接的数据就可以了。下面是工作代码片段

1） 更新图表。 2） 清除图表。 3） 加载带有更新的图表

希望这有帮助

var initialData={
“节点”：[
{“名称”：“Myriel”，“组”：1}，
{“姓名”：“拿破仑”，“集团”：1}，
{“name”：“Mlle.Baptistine”，“group”：1}，
{“名称”：“Mme.Magloire”，“组”：1}，
{“name”：“CountessdeLo”，“group”：1}，
{“名称”：“Geborand”，“组”：1}，
{“name”：“Champtercier”，“group”：1}，
{“name”：“Cravatte”，“group”：1}，
{“名称”：“计数”，“组”：1}
],
“链接”：[
{“源”：1，“目标”：0，“值”：1}，
{“源”：2，“目标”：0，“值”：8}，
{“源”：3，“目标”：0，“值”：10}，
{“源”：3，“目标”：2，“值”：6}，
{“源”：4，“目标”：0，“值”：1}
]
};
可变宽度=960，
高度=500；
var color=d3.scale.category20（）；
var-force=d3.layout.force（）
。收费（-120）
.linkDistance（30）
.尺寸（[宽度、高度]）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
绘制（初始数据）；
var链路，节点；
函数图（图形）{
力
.nodes（图.nodes）
.links（graph.links）
.start（）；
link=svg.selectAll（“.link”）
.数据（图表.链接）
.enter（）.append（“行”）
.attr（“类”、“链接”）
.style（“笔划宽度”，函数（d）{return Math.sqrt（d.value）；}）；
var drag=force.drag（）
.on（“dragstart”，dragstart）；
node=svg.selectAll（“.node”）
.数据（图.节点）
.enter（）.append（“圆”）
.attr（“类”、“节点”）
.attr（“r”，5）
.style（“fill”，函数（d）{返回颜色（d.group）；}）
.呼叫（拖动）；
node.append（“标题”）
.text（函数（d）{返回d.name；}）；
force.on（“勾号”，函数（）{
attr（“x1”，函数（d）{返回d.source.x；}）
.attr（“y1”，函数（d）{返回d.source.y；}）
.attr（“x2”，函数（d）{返回d.target.x；}）
.attr（“y2”，函数（d）{返回d.target.y；}）；
attr（“cx”，函数（d）{return d.x；}）
.attr（“cy”，函数（d）{返回d.y；}）；
});
函数dragstart（d）{
d、 x=d3.event.x；
d、 y=d3.event.y；
d3.选择（this）.classed（“fixed”，d.fixed=true）；
}
}
var savedGraph={nodes:[]，links:[]}；
d3.选择（#saveBtn”）。在（'click'，function（）上{
savedGraph.nodes=node.data（）；
savedGraph.links=link.data（）；
svg.selectAll（“*”）.remove（）；
});
d3.在（'click'，function（）{
console.log（savedGraph）；
绘制（保存图形）；
});
.node{
冲程：#fff；
笔划宽度：1.5px；
}
.链接{
行程：#999；
笔画不透明度：.6；
}

Wow@Gilsha，这非常有用。非常感谢你。我今天在研究一个不同但相似的项目时有一个跟进。是否可以将d3节点放置在mapbox地图上并保持数据。需要捕捉的不是x，y坐标，而是lat，long。你认为做这件事最好的方法是什么？谢谢你，林自然！真的很有帮助！