我正在开发可折叠树图。我正在尝试在节点上生成鼠标悬停事件。
当我当时将鼠标悬停在节点上时,它应该显示节点的名称。我试过了,但我不知道如何计算变换属性值以在节点上方或下方显示名称。
var nodeEnter = node.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
.on("click", click)
.on("mouseover", function(d){
alert("over");
d3.select(this).attr('transform', function(d){ return 'translate(?,?)'})
.text(d.name + ": " + d.id)
.style('display', null);
})
.on("mouseout", function(d){ alert("out"); d3.select(this).style('display', 'none'); });
translate(?,?)
可折叠树图链接:http://bl.ocks.org/mbostock/4339083
请试着帮助我
谢谢
最佳答案
类节点组转换为其位置,如果要在其下添加项目,可以使用相对坐标。例如,圆的中心(默认情况下)位于相对于组的 (0, 0) 坐标处。如果要在圆圈下方 10 px 和右侧 20 px 处添加文本,您应该执行以下操作:
var nodeEnter = node.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) {
return "translate(" + source.y0 + "," + source.x0 + ")";
})
.on("click", click)
.on("mouseover", function(d) {
var g = d3.select(this); // The node
// The class is used to remove the additional text later
var info = g.append('text')
.classed('info', true)
.attr('x', 20)
.attr('y', 10)
.text('More info');
})
.on("mouseout", function() {
// Remove the info text on mouse out.
d3.select(this).select('text.info').remove();
});
问候。
关于d3.js - 鼠标悬停在可折叠 TreeMap 中的节点上时如何显示节点名称,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19297808/