dom – 如何访问d3 SVG元素的数据
|
所以我正在努力制作我自己的d3所做的华丽可视化版本：
http://mbostock.github.com/d3/talk/20222226/bundle.html 我所做的一切基本上是将整个图表向左移动,然后尝试在右侧显示不同的关系,因此每次将鼠标悬停在左侧的名称上时,您不仅会看到不同类型的连接更改颜色,在图表中,您还可以在右侧看到这些连接的名称. 我遇到的问题是访问连接的实际名称.我是javascript的新手,甚至更新到d3,并且在理解如何访问这些SVG元素的实际名称时遇到问题到目前为止,我只是在console.log()中使用两行代码来完成它： var targetTest = d3.selectAll("path.link.target-" + d.key);
console.log(targetTest);
在控制台中,这将给我一个我想要的所有SVG对象的日志,但它为我提供了每个元素的完整信息.像这样的东西： 0: SVGPathElement __data__: Object animatedNormalizedPathSegList: null animatedPathSegList: SVGPathSegList attributes: NamedNodeMap baseURI: "http://localhost/mbostock-d3- 544addb/examples/bundle2/bundle.html" childElementCount: 0 childNodes: NodeList[0] className: SVGAnimatedString clientHeight: 0 clientLeft: 0 clientTop: 0 clientWidth: 0 dataset: DOMStringMap externalResourcesRequired: SVGAnimatedBoolean farthestViewportElement: SVGSVGElement firstChild: null firstElementChild: null id: "" lastChild: null lastElementChild: null localName: "path" namespaceURI: "http://www.w3.org/2000/svg" nearestViewportElement: SVGSVGElement nextElementSibling: SVGPathElement nextSibling: SVGPathElement nodeName: "path" nodeType: 1 nodeValue: null normalizedPathSegList: null offsetHeight: 0 __proto__: SVGPathElement length: 1 parentNode: HTMLDocument __proto__: Array[0] 我试图访问的数据部分位于数据对象中,该对象包含另外三个对象. source: Object target: Object __proto__: Object 在源对象中,(我正在尝试访问)有一个名为key的字段,这是我想要访问的字段 depth: 4 imports: Array[9] key: "Interpolator" name: "flare.animate.interpolate.Interpolator" parent: Object size: 8746 x: 40.62256809338521 y: 180 基本上我想在这个键上调用document.write或类似的$(#id).text(),但我似乎只能一次访问一个元素,我正在使用的AKA var target = d3.selectAll("path.link.target-" + d.key);
var source = d3.selectAll("path.link.source-" + d.key);
var imports = source.property("__data__").target.key;
var exports = target.property("__data__").source.key;
但是这些只会给我一个名字,而不是一个完整的名单. console.log(imports) 即使我使用selectAll,也会一次只给我一个名字. 任何帮助将非常感激！如果这个问题有点复杂,我很抱歉,我试图尽可能具体,因为这是一个非常具体的问题,但我可能已经详细介绍了……如果可行的话.无论如何,谢谢你！ 艾萨克 解决方法
在源变量和目标变量上使用每个变量来获取它们返回的每个值,而不是仅返回第一个值.
var targets = d3.selectAll("path.link.target-" + d.key);
var sources = d3.selectAll("path.link.source-" + d.key);
var imports = [];
var exports = [];
targets.each(function(d) {
imports.push(d["source"].key);
});
sources.each(function(d) {
exports.push(d["target"].key);
});
console.log("Imports - " + imports);
console.log("Exports - " + exports);
这是一个JSFiddle,显示它在行动.我将上面的代码添加到鼠标悬停功能,因为这是突出显示的地方. 像attr和style这样的D3方法在幕后使用,所以你不必这样做,但由于你使用自定义函数来访问数据,你需要使用每个方法. （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |