d3.js,点击操作到另一个用sunburst的变量数组编码的URL
d3.js, click action to another URL encoding with array of variables of sunburst
我对序列进行了sunburst可视化,并希望为每个路径添加一个链接。
我读过类似的问题d3.js,点击链接到另一个用变量编码的URL,可以根据特定路径的变量进行链接。(请参阅下面的代码(此代码可以生成类似于"http://somelink.com/link.php?id1=CurrentNode".
然而,我想生成类似"http://somelink.com/link.php?id1=CurrentNode&id2=ParentNode"。
我对javascript不是很了解,所以我需要帮助。
// Main function to draw and set up the visualization, once we have the data.
function createVisualization(json) {
// Basic setup of page elements.
initializeBreadcrumbTrail();
drawLegend();
d3.select("#togglelegend");
// Bounding circle underneath the sunburst, to make it easier to detect
// when the mouse leaves the parent g.
vis.append("svg:circle")
.attr("r", radius)
.style("opacity", 0);
// For efficiency, filter nodes to keep only those large enough to see.
var nodes = partition.nodes(json)
.filter(function(d) {
return (d.dx > 0.005); // 0.005 radians = 0.29 degrees
});
var path = vis.data([json]).selectAll("path")
.data(nodes)
.enter().append("svg:path")
.attr("display", function(d) { return d.depth ? null : "none"; })
.attr("d", arc)
.attr("fill-rule", "evenodd")
.style("fill", function(d) { return colors[d.name]; })
.style("opacity", 1)
.on("mouseover", mouseover)
.on("click", function(d) {
var url = "http://somelink.com/link.php?id1=";
url += d.name;
$(location).attr('href', url);
window.location = url;
});
// Add the mouseleave handler to the bounding circle.
d3.select("#container").on("mouseleave", mouseleave);
// Get total size of the tree = value of root node from partition.
totalSize = path.node().__data__.value;
};
我想出了如何制作三级日光浴的url。为了获得基于日光浴水平的价值,我对Lars的建议进行了一些修改。
.on("click", function(d) {
var url = "http://somelink.com/link.php";
if (d.depth== 1) {
url += "?id1=" + d.name;
}
if (d.depth== 2) {
url += "?id1=" + (d.parent ? d.parent.name : "");
url += "&id2=" + d.name;
}
if (d.depth== 3) {
url += "?id1=" + (d.parent.parent ? d.parent.parent.name : "");
url += "&id2=" + (d.parent ? d.parent.name : "");
url += "&id3=" + d.name;
}
$(location).attr('href', url);
window.location = url;
});
sunburst布局的节点具有包含父节点的属性.parent
(或根节点为null(。你可以直接在你的代码中使用它,如下所示:
.on("click", function(d) {
var url = "http://somelink.com/link.php?id1=" + d.name +
"?id2=" + (d.parent ? d.parent.name : "");
$(location).attr('href', url);
window.location = url;
});
相关文章:
- 将函数的上下文应用于javascript变量
- 无法导出函数expressjs/requestjs中的变量
- 函数参数中的数据与指定变量之间的任何性能差异
- 将PHP变量传递给jQuery时遇到问题
- 如何通过ajax刷新JSF填充的javascript变量
- 参数变量出现ngTable指令问题
- 通过javascript重定向html传递php变量
- 将jsp文件下拉列表中的选定项分配给一个java变量(比如String selection)
- 全局变量和全局对象的属性之间有什么区别吗
- 如何在Bootstrap Modal中为动态点击生成的变量设置jade属性
- 值对象在某个变量发生更改后发生更改
- Javascript变量赋值|
- AngularJS-在JSON选择器中使用变量名
- Javascript计数器变量未显示正确的值
- delete关键字在全局变量上的不同行为
- 如何在php变量中嵌入JQuery代码
- ReactJS映射:如何仅在url变量不为空时呈现html链接
- 在javascript函数中设置全局变量
- 将变量传递给外部Javascript
- d3.js,点击操作到另一个用sunburst的变量数组编码的URL