javascript - d3 将元素重置为其原始颜色
问题描述
很长的帖子,简单的问题。我采用了旭日形模板并添加了突出显示功能。当您将鼠标悬停在“节点”上时,它会突出显示所有其他具有相同名称的节点。这可以在以下代码中找到(mouseover
位于mouseout
底部):
! function() {
// Stuff to build the sunburst
var width = 960,
height = 700,
radius = (Math.min(width, height) / 2) - 10;
var formatNumber = d3.format(",d");
var x = d3.scaleLinear()
.range([0, 2 * Math.PI]);
var y = d3.scaleSqrt()
.range([0, radius]);
var color = d3.scaleOrdinal(d3.schemeCategory20);
var partition = d3.partition();
var arc = d3.arc()
.startAngle(function(d) {
return Math.max(0, Math.min(2 * Math.PI, x(d.x0)));
})
.endAngle(function(d) {
return Math.max(0, Math.min(2 * Math.PI, x(d.x1)));
})
.innerRadius(function(d) {
return Math.max(0, y(d.y0));
})
.outerRadius(function(d) {
return Math.max(0, y(d.y1));
});
// Create the svg element
var svg = d3.select("#vis").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + (height / 2) + ")");
// Load the json file
d3.json("static/js/wheel.json", function(error, root) {
if (error) throw error;
root = d3.hierarchy(root);
root.sum(function(d) {
return d.size;
});
var path = svg.selectAll("path")
.data(partition(root).descendants())
.enter().append("g")
path.append("path")
.attr("d", arc)
.attr("name", function(name) {
return name.data.name
})
.style("fill", function(d) {
return color((d.children ? d : d.parent).data.name);
})
//Zoom in function
.on("click", click)
//When mouse enters node
.on("mouseover", function() {
var name = d3.select(this).attr("name");
var col = d3.select(this).style("fill");
d3.selectAll("path")
.filter(function(d) {
return d3.select(this).attr("name") === name;
})
.style('fill', 'orange')
.style('stroke', '#ff0d3c')
.style("stroke-width", "3");
})
//mouse leaves node
.on("mouseout", function() {
d3.selectAll("path").style("fill", function(d) {
return color((d.children ? d : d.parent).data.name);
})
.style("stroke", "#000")
.style("stroke-width", "1")
})
这就像一个魅力,它突出显示节点并在移动鼠标后将它们恢复为原始颜色。但现在我还添加了一个input
文本框,html
它突出显示与文本框文本同名的节点。(它会在您键入时突出显示):
d3.select("#highlightWord").on("input", function() {
// Reset all the nodes to their original color here?
var name = this.value;
// Highlight all nodes that match textbox
d3.selectAll("path")
.filter(function (d) {
return d3.select(this).attr("name") === name;
})
.style('fill', 'orange')
.style('stroke','#ff0d3c')
.style("stroke-width","3");
});
问题是,在文本框不再与节点名称匹配后,我不知道如何从这里重置颜色。我认为最简单的方法是每次更新文本框时重置所有节点,以便它将重置每个节点,然后更改匹配的节点。但我不知道如何在此处获取原始节点颜色/样式。结果是每次一个节点与文本框匹配时,它将永远突出显示,直到mouseout
函数被触发。
如果有人能告诉我在节点不再匹配文本框后如何重置节点,我将不胜感激,在此先感谢!
解决方案
推荐阅读
- django - 如何使用根目录作为基本 url 来呈现 html 页面?
- symfony - Symfony Doctrine“注意:未初始化的字符串偏移量:0”
- mysql - 如何在 SELECT 语句中修复 MySQL 中的语法错误
- python-3.x - 从复杂的表格中刮取信息
- javascript - 为什么 requestAnimationFrame 回调任务需要这么长时间?
- phpstorm - https 网站上的 Xdebug,无法与 PhpStorm 一起正常工作
- python - 如何销毁日志处理程序?(我应该这样做吗?)
- iphone - 使用媒体查询拆分弹性盒
- python - 为什么jsonnet python包使用_jsonnet这个名字?
- python - ES6 - 无法在 localhost 和 python 服务器中加载模块