Javascript D3带条形图的可缩放圆形包装（条形图缩放）

我在D3中做了一些基本的事情，所以我对它没有深入的了解。 我用条形图创建了可缩放的圆形包装图

代码如下：

var-xr、yr、xaxis、yaxis、bar、bg；
var svg=d3。选择（“svg”），
保证金=20，
宽度=+svg.attr（“宽度”）-margin.left-margin.right，
高度=+svg.attr（“高度”）-margin.top-margin.bottom；
直径=+svg.attr（“宽度”），
g=svg.append（“g”）.attr（“转换”、“转换”（+diameter/2+），“+diameter/2+”）；
var color=d3.scaleLinear（）
.domain（[-1,5]）
.范围（[“hsl（152,80%，80%），“hsl（228,30%，40%）”）
.插值（d3.插值EHCL）；
var pack=d3.pack（）
.尺寸（[直径-边距，直径-边距]）
.填充（2）；
d3.json（“occulation.json”），函数（错误，根）{
如果（错误）抛出错误；
根=d3.层次结构（根）
.sum（函数（d）{
返回d.size；
})
.排序（功能（a、b）{
返回b.value-a.value；
});
var focus=root，
nodes=pack（root）.subjections（），
看法
变量循环=g.selectAll（“循环”）
.数据（节点）过滤器（功能（d）{
返回d.height>0
}))
.enter（）.append（“圆”）
.attr（“类”，函数（d）{
返回d.parent？d.children？“node”：“node-node--leaf”：“node-node--root”；
})
.样式（“填充”，功能（d）{
返回d.children？颜色（d.depth）：空；
})
.打开（“单击”，功能（d）{
如果（焦点！==d）{
如果（d.儿童）{
zoom（d），d3.event.stopPropagation（）；
}否则{
var nextMonthVal=提示（“请输入要设置的目标值”）；
如果（下个月）{
警报（“您已为下个月设定Rs.+nextMonthVal+”的目标”）；
}
}
}
});
变量叶=g.selectAll（“.bar”）
.数据（节点）过滤器（功能（d）{
返回d.height==1
}))
.输入（）
.附加（“g”）
.attr（“x”，0）
.attr（“y”，0）
.attr（“高度”，功能（d）{
返回d.x+d.r
})
.attr（“宽度”，函数（d）{
返回d.y+d.r
})
.attr（“类”、“条”）
.每个功能（d）{
退税数据（这个，这个._u数据_uu，d）；
})
var text=g.selectAll（“.label”）
.数据（节点）过滤器（功能（d）{
返回d.height>0
}))
.enter（）.append（“文本”）
.attr（“类别”、“标签”）
.样式（“填充不透明度”，函数（d）{
返回d.parent==root？1:0；
})
.样式（“显示”，功能（d）{
返回d.parent==根？“内联”：“无”；
})
.文本（功能（d）{
返回d.data.name+“”+d.data.size+“Rs.”；
});
var node=g.selectAll（“圆圈、.bar、.label”）；
svg
.样式（“背景”，颜色（-1））
.on（“单击”，函数（）{
缩放（根）；
});
zoomTo（[root.x，root.y，root.r*2+margin]）；
功能缩放（d）{
var focus0=焦点；
焦点=d；
var transition=d3.transition（）
.持续时间（d3.event.altKey？7500:750）
.tween（“缩放”，功能（d）{
var i=d3.interpolateZoom（视图，[focus.x，focus.y，focus.r*2+边距]；
返回函数（t）{
zoomTo（i（t），焦点；
};
});
转换。选择全部（“.label”）
.过滤器（功能（d）{
返回d.parent===focus | | this.style.display===“inline”；
})
.样式（“填充不透明度”，函数（d）{
返回d.parent==focus？1:0；
})
.开启（“启动”，功能（d）{
如果（d.parent==focus）this.style.display=“inline”；
})
.开启（“结束”，功能（d）{
如果（d.parent！==focus）this.style.display=“无”；
});
}
函数zoomTo（v，焦点）{
var k=直径/v[2]；
视图=v；
node.attr（“转换”，函数（d）{
返回“translate”（+（d.x-v[0]）*k+”，“+（d.y-v[1]）*k+”；
});
圆属性（“r”，函数（d）{
返回d.r*k；
});
if（focus&&focus.height==1）{
var data2=focus.children.map（函数（d）{
返回数据
})
var data1=[]
rectwidth=focus.r，
rectheight=focus.r；
barsize=data2.length；
maxDataPoint=d3.max（数据2，函数（d）{
返回d.size
});
变量linearScale=d3.scaleLinear（）
.domain（[0，maxDataPoint]）
.范围（[0，矩形高度]）；
对于（变量i=0；i”，D）；
返回i*（矩形宽度/数据1.长度）；
})
.attr（“y”，函数（d）{
返回高度-d.size；
})
.attr（“宽度”，焦点.r/data1.length-2）
.attr（“高度”，功能（d）{
返回d.size；
});
}
}
功能牵引杆数据（ele、数据、d）{
如果（！data&&！data.parent）
返回；
var data2=data.children.map（函数（e）{
返回e.data
})
var data1=[]
矩形宽度=d.r，
垂直高度=d.r；
barsize=data2.length；
maxDataPoint=d3.max（数据2，函数（d）{
返回d.size
});
变量linearScale=d3.scaleLinear（）
.domain（[0，maxDataPoint]）
.范围（[0，矩形高度]）；
对于（变量i=0；i>>'，d）；
返回“translate”（“+-d.r/2+”，“+-d.r/2+”）；
});
条形=背景。选择全部（“.bar”）
.数据（数据1）
.输入（）
.append（'rect'）
.attr（“类”、“条”）
.attr（“x”，函数（d，i）{
返回i*