在D3中双击时更改节点的颜色
Change the color of nodes on double click in D3
我希望双击时节点的颜色发生变化。即,第一次双击时,它会变黑,但再次双击时,会变回原来的颜色。我可以让它在第一次双击时变成黑色,但我不能让它回到原来的颜色。提前谢谢,这是我的密码。
var gnodes = svg.selectAll('g.gnode')
.data(graph.nodes)
.enter()
.append('g')
.classed('gnode', true);
var node = gnodes.append("circle")
.attr("class", "node")
.attr("r", 5)
.style("fill", function(d) {return d.colr; })
.on('dblclick', function (d)
{
if (d3.select(this).style("fill") != "black")
{
d3.select(this).style("fill", "black");
}
else
{
d3.select(this).style("fill", function(d){return d.colr;});
}
})
.call(force.drag);
您在这里遇到的问题实际上很难发现。
您正在检查fill
样式是否等于字符串"black"
。问题是,许多浏览器(包括Chrome和FF)将颜色名称重新格式化为RGB字符串。因此,当您将填充设置为"black"
时,它将转换为RGB字符串"rgb(0, 0, 0)"
。因此,实际上,调用d3.select(this).style("fill")
将返回这个rgb字符串,而不是颜色名称,从而确保代码的else
分支永远不会运行。
通过使用selection.each
将每个圆的状态存储为布尔值,然后注册其双击处理程序,可以避免将填充的当前状态作为样式字符串进行检查,从而切换布尔值,并根据其值进行分支。试试这个:
var node = gnodes.append("circle")
.attr("class", "node")
.attr("r", 5)
.style("fill", function(d) {return d.colr; })
.each(function() {
var sel = d3.select(this);
var state = false;
sel.on('dblclick', function() {
state = !state;
if (state) {
sel.style('fill', 'black');
} else {
sel.style('fill', function(d) { return d.colr; });
}
});
});
处理此问题的一种方法是通过CSS:
.doubled { fill: black !important; }
然后在dblclick函数中切换这个CSS类:
d3.selectAll(".node")
.on("dblclick", function() {
var c = d3.select(this).classed("doubled");
d3.select(this).classed("doubled", !c);
})
此处的工作示例:http://jsfiddle.net/qAHC2/829/
相关文章:
- D3 上下文菜单,更改所选节点颜色
- 如何从onClick更改多个SVG节点的颜色
- 根据类型更改 jstree 节点文本颜色
- 如何在动态 js 中更改一组节点的颜色
- 力导向图-如果节点同时是源和目标,则定义节点的颜色
- d3.根据数组内容改变各个节点的颜色
- 在 CytoScape.js 中单击连接的节点时更改边缘线颜色
- Javascript Infovis 更改单个节点的颜色
- 在壳出到节点时保留输出颜色
- 如何在D3JS中根据数据值设置节点的颜色
- 更改d3.js节点的填充颜色
- Snap.load()一个svg img并为其填充颜色设置动画's子节点
- 在D3中双击时更改节点的颜色
- 节点.js生成颜色
- Cytoscape.js:如何将节点颜色/形状/大小导出到json
- D3可折叠树不同的节点颜色
- 如何设置剑道UI树视图的树视图节点颜色
- D3 CSV到JSON邻接表,如何访问节点颜色
- Jsnetworkx改变节点颜色,访问邻居
- 动画节点颜色