Javascript 制作响应性D3层次条形图并显示工具提示

嗨，我想使D3图表具有响应性，并在层次条形图上显示工具提示

以下代码用于响应我的图表，但这不起作用

window.onresize = function () {
debugger;
      d3.select('svg>g').remove();
      down(d,i);

      bar(d);
      up(d);
       svg.select(".background")
      .datum(d)
    .transition()
      .duration(end);

  d.index = i;
   down(root, 1000);

} 

谁能告诉我你的建议吗

正文{
字体：10px无衬线；
}
矩形背景{
填充物：白色；
}
.安讯士{
形状渲染：边缘清晰；
}
.轴线路径，
.轴线{
填充：无；
行程：#000；
}
D3
var margin={顶部：30，右侧：30，底部：40，左侧：50}，
宽度=window.innerWidth-margin.left-margin.right-100，
高度=window.innerHeight-margin.top-margin.bottom-100；
变量y=d3.scale.linear（）
.范围（[高度，0]）；
var-barHeight=20；
var color=d3.scale.ordinal（）
.范围（[“钢蓝”、“#ccc”]）；
var持续时间=750，
延迟=25；
var partition=d3.layout.partition（）
.value（函数（d）{返回d.size；}）；
var yAxis=d3.svg.axis（）
.比例（y）
.东方（“左”）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
svg.append（“rect”）
.attr（“类别”、“背景”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
。打开（“单击”，向上）；
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.附加（“行”）
.attr（“x1”，“100%”）；
svg.append（“g”）
.attr（“类”、“y轴”）；
d3.json（“https://jsonblob.com/api/f577d19c-0f2b-11e7-a0ba-09040711ce47，函数（错误，根）{
如果（错误）抛出错误；
分区.节点（根）；
y、 域（[0，root.value]）.nice（）；
向下（根，1000）；
});
功能下降（d，i）{
如果（！d.children | | | | this.uuu transition_uuu）返回；
var end=持续时间+d.children.length*延迟；
//将当前显示的任何条标记为退出。
var exit=svg。选择全部（“.enter”）
.attr（“类”、“出口”）；
//输入节点会立即隐藏单击的工具栏，因此请将其隐藏。
exit.selectAll（“rect”）.filter（函数（p）{return p==d；}）
.样式（“填充不透明度”，1e-6）；
//为单击的数据输入新栏。
//根据上面的说明，可以立即看到输入条。
var enter=bar（d）
.attr（“转换”，堆栈（i））
.样式（“不透明”，1）；
//使文本淡入，即使条形图可见。
//以家长的身份给条形图上色；如果合适，它们将淡出给孩子们。
输入。选择（“文本”）。样式（“填充不透明度”，1e-6）；
输入。选择（“矩形”）。样式（“填充”，颜色（真））；
//更新x尺度域。
y、 域（[0，d3.max（d.children，函数（d）{返回d.value；}）]）.nice（）；
//更新x轴。
svg.selectAll（“.y.axis”）.transition（）
.持续时间（持续时间）
.呼叫（yAxis）；
//将输入杆转换到其新位置。
var entertransformation=enter.transition（）
.持续时间（持续时间）
.delay（函数（d，i）{返回i*delay；}）
.attr（“transform”，函数（d，i）{return”translate（“+barHeight*i*2.5+”，“+0+”））；}）；
//转换输入文本。
输入转换。选择（“文本”）
.样式（“填充不透明度”，1）；
//将输入矩形转换为新的y比例。
entertransformation.select（“rect”）
.attr（“y”，函数（d）{返回y（d.value）；}）
.attr（“高度”，函数（d）{返回高度-y（d.value）；}）
.style（“填充”，函数（d）{返回颜色（！！d.children）；}）；
//将退出条转换为淡出。
var exitTransition=exit.transition（）
.持续时间（持续时间）
.样式（“不透明度”，1e-6）
.remove（）；
//将现有条形图过渡到新的y形刻度。
exitTransition。选择All（“rect”）
.attr（“高度”，函数（d）{返回高度-y（d.value）；}）；
//将当前节点重新绑定到背景。
svg.select（“.background”）
.基准（d）
.transition（）
.持续时间（结束）；
d、 指数=i；
}
功能启动（d）{
如果（！d.parent | | this.uu transition_uu）返回；
var end=持续时间+d.children.length*延迟；
//将当前显示的任何条标记为退出。
var exit=svg。选择全部（“.enter”）
.attr（“类”、“出口”）；
//为单击的数据的父级输入新栏。
var enter=bar（d.parent）
.attr（“transform”，函数（d，i）{return”translate（“+barHeight*i*2.5+”，“+0+”）；）
.样式（“不透明度”，1e-6）；
//根据需要为条形图上色。
//退出节点将隐藏父栏，因此将其隐藏。
输入。选择（“rect”）
.style（“填充”，函数（d）{返回颜色（！！d.children）；}）
.filter（函数（p）{返回p==d；}）
.样式（“填充不透明度”，1e-6）；
//更新y比例域。
y、 域（[0，d3.max（d.parent.children，函数（d）{返回d.value；}）]）.nice（）；
//更新y轴。
svg.selectAll（“.y.axis”）.transition（）
.持续时间（持续时间）
.呼叫（yAxis）；
//过渡输入条在整个持续时间内淡入。
var entertransformation=enter.transition（）
.期限（完）
.样式（“不透明”，1）；
//将输入矩形转换为新的y比例。
//完成输入父矩形后，使其可见！
entertransformation.select（“rect”）
.attr（“高度”，函数（d）{返回高度-y（d.value）；}）
.attr（“y”，函数（d）{返回y（d.value）；}）
.each（“end”，function（p）{if（p==d）d3.select（this）.style（“fill opacity”，null）；}）；
//将退出栏转换到父级位置。
var exitTransition=exit.selectAll（“g”）.transition（）
.持续时间（持续时间）
.delay（函数（d，i）{返回i*delay；}）
.attr（“转换”，堆栈（d.index））；
//将退出文本转换为淡出。
exitTransition.选择（“文本”）
.样式（“填充不透明度”，1e-6）；
//将现有矩形转换为新比例并淡入父颜色。
exitTransition.select（“rect”）
.attr（“高度”，函数（d）{返回高度-y（d.value）；}）
.attr（“y”，函数（d）{返回y（d.value）；}）
.样式（“填充”，颜色（真实））；
//清除出口
d3.select(window).on('resize', function() {
  _this.redrawGraph();        //your function that draws the graph
});