Javascript svg缩放上的滚动条

我正在使用D3创建一个可视化。可视化非常适合使用viewBox的可用画布

graphArea.attr("viewBox",bbox.x+" "+bbox.y+" "+bbox.width+" "+bbox.height);

这对于较小的图形非常有效。但是，对于一些较大的图表，用户需要缩小图表以增加清晰度

当用户缩小图表时，图表的某些部分将隐藏，因为它们位于viewBox之外

我的要求是，当用户缩小图表时，会自动提供一个滚动条，使用户可以通过水平或垂直滚动查看隐藏的部分

我尝试动态设置div的宽度和高度（包含svg），但没有帮助

d3.select("#containerdiv")          
 .attr('width', bbox.width)
 .attr('height', bbox.height);

});

下面是完整的代码

var宽度=960，高度=400；
d3.选择（“正文”）.追加（“div”）
.attr（“id”，“containerdiv”）；
//删除旧的SVG
d3.选择（“#wkfsvg”）.remove（）；
var-bbox=null；
//添加新的SVG
var graphArea=d3.select（“#containerdiv”）.append（“svg”）
.attr（{width:width，height:height，“指针事件”：“all”}）
.attr（“id”、“wkfsvg”）；
var g=new dagreD3.graphlib.Graph（）.setGraph（{}）；
图a.插入（“g”、“g”）；
var nodesJson=[
{
“节点”：“启动”，
“状态”：“startend”，
“创建日期”：“，
“表演者姓名”：“，
“执行类型”：“自动”
},
{
“节点”：“查找下一个审批人”，
“状态”：“已完成”，
“创建日期”：“，
“表演者姓名”：“，
“执行类型”：“自动”
},
{
“节点”：“检查管理器”，
“状态”：“已完成”，
“创建日期”：“，
“表演者姓名”：“，
“执行类型”：“自动”
},
{
“节点”：“为IT项目经理设置状态和ACL”，
“状态”：“已完成”，
“创建日期”：“，
“表演者姓名”：“，
“执行类型”：“自动”
},
{
“节点”：“为IT签核审批人设置状态和ACL”，
“状态”：“已完成”，
“创建日期”：“，
“表演者姓名”：“，
“执行类型”：“手动”
},
{
“节点”：“IT项目经理批准”，
“状态”：“已完成”，
“创建日期”：“，
“表演者姓名”：“，
“执行类型”：“手动”
},
{
“id”：“财务审批人”，
“节点”：“财务审批人”，
“状态”：“休眠”，
“创建日期”：“，
“表演者姓名”：“，
“执行类型”：“手动”
},
{
“节点”：“发送完成电子邮件”，
“地位”：“未来”，
“创建日期”：“，
“表演者姓名”：“，
“执行类型”：“手动”
},
{
“节点”：“发送给请求者”，
“地位”：“未来”，
“创建日期”：“，
“表演者姓名”：“，
“执行类型”：“手动”
},
{
“节点”：“向请求者发送电子邮件”，
“状态”：“已完成”，
“创建日期”：“，
“表演者姓名”：“，
“执行类型”：“手动”
},
{
“id”：“为请求者在表单上设置ACL”，
“节点”：“为请求者在表单上设置ACL”，
“地位”：“未来”，
“创建日期”：“，
“表演者姓名”：“，
“执行类型”：“手动”
},
{
“节点”：“在表单上设置完成ACL”，
“地位”：“未来”，
“创建日期”：“，
“表演者姓名”：“，
“执行类型”：“手动”
},
{
“id”：“在采购订单上设置完成ACL”，
“节点”：“在采购订单上设置完成ACL”，
“地位”：“未来”，
“创建日期”：“，
“表演者姓名”：“，
“执行类型”：“手动”
},
{
“节点”：“在附件上设置完成ACL”，
“地位”：“未来”，
“创建日期”：“，
“表演者姓名”：“，
“执行类型”：“手动”
},
{
“节点”：“在附件上设置ACL”，
“状态”：“已完成”，
“创建日期”：“，
“表演者姓名”：“，
“执行类型”：“手动”
},
{
“节点”：“PM拒绝更新评论”，
“地位”：“未来”，
“创建日期”：“，
“表演者姓名”：“，
“执行类型”：“手动”
},
{
“节点”：“FA拒绝更新评论”，
“地位”：“未来”，
“创建日期”：“，
“表演者姓名”：“，
“执行类型”：“手动”
},
{
“节点”：“PM更新评论”，
“状态”：“已完成”，
“创建日期”：“，
“表演者姓名”：“，
“执行类型”：“手动”
},
{
“节点”：“FA更新评论”，
“地位”：“未来”，
“创建日期”：“，
“表演者姓名”：“，
“执行类型”：“手动”
},
{
“节点”：“更新请求者的评论”，
“地位”：“未来”，
“创建日期”：“，
“表演者姓名”：“，
“执行类型”：“手动”
},
{
“节点”：“结束”，
“状态”：“startend”，
“创建日期”：“，
“表演者姓名”：“，
“执行类型”：“手动”
}
];      
//自动标记每个节点
forEach（函数（节点）{
如果（node.status==“未来”）{
如果（node.execution_type==“手动”）{
g、 setNode（node.nodes，{labelType:“html”，标签：node.nodes+'\uf007'，类：“future”}）；
}否则{
g、 setNode（node.nodes，{label:node.nodes，类：“future”}）；
}
}else if（node.status==“已完成”）{
如果（node.execution_type==“手动”）{
g、 setNode（node.nodes，{labelType:“html”，标签：node.nodes+'\uf007'，类：“completed”}）；
}否则{
g、 setNode（node.nodes，{label:node.nodes，类：“completed”}）；
}
}else if（节点