Javascript 如何在树状结构节点内或D3中鼠标悬停时添加进度条

这是我的代码，我想在每个节点中放置一个进度条，但不知何故，对于动态树结构，或者当鼠标悬停在节点上时，它应该显示其进度条，我无法这样做。我有json文件，其中包含所需的详细信息。 显示在矩形中的数字进度是否可以在D3中显示为进度条或鼠标悬停动作

正文{
文本对齐：居中；
}
svg{
边缘顶部：32px；
边框：1px实心#aaa；
}
.person rect{
填充：#fff；
笔画：钢蓝；
笔画宽度：1px；
}
.人{
字体：14px无衬线；
}
.链接{
填充：无；
冲程：#ccc；
笔划宽度：1.5px；
}
var boxWidth=150，
箱高=40；
//设置缩放和平移
var zoom=d3.behavior.zoom（）
.scaleExtent（[1,1]）
.on（'zoom'，function（）{
attr（“transform”、“translate”（+d3.event.translate+））比例（+d3.event.scale+）；
})
//偏移，以便第一次平移和缩放不会跳回原点
.翻译（[150200]）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（'宽度'，1000）
.attr（'height'，500）
.呼叫（缩放）
.append（'g'）
//树的左侧填充，以便整个根节点都显示在屏幕上。
//TODO:找到更好的方法
.attr（“转换”、“翻译（150200）”）；
var tree=d3.layout.tree（）
.nodeSize（[90200]）
.分离（职能（{
回报5；
})
.儿童（功能（人）{
返回人。\u父母；
});
d3.json（'data/4gens.json'，函数（错误，json）{
如果（错误）{
返回控制台。错误（error）；
}
var nodes=tree.nodes（json），
链接=树。链接（节点）；
//样式链接（边）
svg.selectAll（“path.link”）
.数据（链接）
.enter（）.append（“路径”）
.attr（“类”、“链接”）
.attr（“d”，肘部）；
//样式节点
var node=svg.selectAll（“g.person”）
.数据（节点）
.enter（）.append（“g”）
.attr（“类”、“人”）
.attr（“转换”，函数（d）{return“translate”（+d.y+），“+d.x+”）；}）；
//绘制矩形人物框
node.append（“rect”）
艾特先生({
x:-（箱宽/2），
y:-（箱高/2），
宽度：boxWidth，
高度：箱高
});
//画出这个人的名字并把它放在盒子里
node.append（“文本”）
.attr（“dx”，-（箱宽/2）+10）
.attr（“dy”，0）
.attr（“文本锚定”、“开始”）
.attr（'class'，'name'）
.文本（功能（d）{
返回d.name；
});
node.append（“文本”）
.attr（“dx”，-（箱宽/2）+10）
.attr（“dy”，16）
.attr（“文本锚定”、“开始”）
.attr（'class'，'About SPAN'）
.文本（功能（d）{
返回d.born；
});
});

这在D3中是可行的，只需在节点的主矩形之后添加另一个

rect

您需要在D3代码中添加矩形，如下所示

// Draw the rectangle person boxes
node.append("rect")
  .attr({
    x: -(boxWidth/2),
    y: -(boxHeight/2),
    width: boxWidth,
    height: boxHeight
  });

  // ***** Add the following here *****
  // This assumes your progress bar has boxWidth as its full width,
  // starts from the left, and has the height as the entire box.
  // To change this behavior, adjust the corresponding lines (x, y, width and height).
  node.append('rect')
    .attr('class', 'progressBar')
    .attr('x', -(boxWidth/2))
    .attr('y', -(boxHeight/2))
    .attr('width', d => parseInt(d.progress.split('|')[1].trim()) / 100 * boxWidth)
    .attr('height', boxHeight);

您还可以在CSS中添加样式：

.person rect{
填充：#fff；
笔画：钢蓝；
笔画宽度：1px；
}
/*****在此处添加以下内容，根据需要进行调整*****/
.person-rect.progressBar{
填充：钢蓝；
}

鼠标悬停部分有点棘手，因为您可能需要将

：hover

添加到

元素中。您需要这样做（除非您想对节点本身做一些特别的事情，否则这应该不是一个大问题）。然后CSS部分变成以下内容：

.person rect{
填充：#fff；
笔画：钢蓝；
笔画宽度：1px；
}
/*****在此处添加以下内容，根据需要进行调整*****/
.person-rect.progressBar{
填充：钢蓝；
可见性：隐藏；
}
.个人*{
指针事件：无；
}
.人：悬停矩形进度条{
能见度：可见；
}}
/** 
*同时更改以下内容：
*因为如果中的所有内容都绕过了指针事件，
*默认情况下，它不会触发悬停。
*/
.人{
指针事件：边界框；
字体：14px无衬线；
}

这在D3中是可行的，只需在节点的主矩形之后添加另一个

rect

您需要在D3代码中添加矩形，如下所示

// Draw the rectangle person boxes
node.append("rect")
  .attr({
    x: -(boxWidth/2),
    y: -(boxHeight/2),
    width: boxWidth,
    height: boxHeight
  });

  // ***** Add the following here *****
  // This assumes your progress bar has boxWidth as its full width,
  // starts from the left, and has the height as the entire box.
  // To change this behavior, adjust the corresponding lines (x, y, width and height).
  node.append('rect')
    .attr('class', 'progressBar')
    .attr('x', -(boxWidth/2))
    .attr('y', -(boxHeight/2))
    .attr('width', d => parseInt(d.progress.split('|')[1].trim()) / 100 * boxWidth)
    .attr('height', boxHeight);

您还可以在CSS中添加样式：

.person rect{
填充：#fff；
笔画：钢蓝；
笔画宽度：1px；
}
/*****在此处添加以下内容，根据需要进行调整*****/
.person-rect.progressBar{
填充：钢蓝；
}

鼠标悬停部分有点棘手，因为您可能需要将

：hover

添加到

元素中。您需要这样做（除非您想对节点本身做一些特别的事情，否则这应该不是一个大问题）。然后CSS部分变成以下内容：

.person rect{
填充：#fff；
笔画：钢蓝；
笔画宽度：1px；
}
/*****在此处添加以下内容，根据需要进行调整*****/
.person-rect.progressBar{
填充：钢蓝；
可见性：隐藏；
}
.个人*{
指针事件：无；
}
.人：悬停矩形进度条{
能见度：可见；
}}
/** 
*同时更改以下内容：
*因为如果中的所有内容都绕过了指针事件，
*默认情况下，它不会触发悬停。
*/
.人{
指针事件：边界框；
字体：14px无衬线；
}

我认为可以通过在初始的

rect

中添加一个

rect

，将其宽度设置为值的百分比和

可见性

作为CSS中的

隐藏

，然后在CSS中的父rect上添加一个伪类，如

。person rect:hover>rect

，它将

visibility

设置为

visibility

。我认为这可以通过在初始

rect

中添加一个

rect

，将其宽度设置为值的百分比，并将

visibility

设置为CSS中的

隐藏
，然后在CSS中的父rect上添加一个伪类，如
。person rect:hover>rect
，它将
可见性设置为
可见
。嘿@Xiaoyi Cao感谢它的工作