Javascript d3.js创建网格样式的条形图
我试图动态构建一些“金钱条形图”，如本例所示 我有算法来确定每个类别需要生成多少账单。小美元符号已经在svg中创建。所以实际上我所要做的就是以类似网格的方式附加它们。 然后，我必须能够根据数据集中存在的不同类别的数量创建多个条形图 真的在这一点上，它只是围绕“网格”格式创建美元符号，我被卡住了。任何帮助都会很好Javascript d3.js创建网格样式的条形图,javascript,d3.js,svg,Javascript,D3.js,Svg,我试图动态构建一些“金钱条形图”，如本例所示 我有算法来确定每个类别需要生成多少账单。小美元符号已经在svg中创建。所以实际上我所要做的就是以类似网格的方式附加它们。 然后，我必须能够根据数据集中存在的不同类别的数量创建多个条形图 真的在这一点上，它只是围绕“网格”格式创建美元符号，我被卡住了。任何帮助都会很好 任何提示都将不胜感激 这里有一个简单的例子。我已经把它注释掉了，让我知道你不明白的地方。我有点作弊，用rect元素画账单： 风险值数据=[{ “名称”：“网络”，“价值”：376.
任何提示都将不胜感激 这里有一个简单的例子。我已经把它注释掉了，让我知道你不明白的地方。我有点作弊，用
rect
风险值数据=[{
“名称”：“网络”，“价值”：376.19
},{
“名称”：“电话”，“值”：550.55
},{
“名称”：“存储”、“值”：125.25
}]
//一些常数
var billWorth=20，//票据价值
billWidth=50，
billHeight=26，
numRows=4
sectionSpace=150；//为每组数据分配的空间
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，600）
.attr（“高度”，600）
.附加（“g”）；
//用于数据点的组
var g=svg.selectAll（“财务”）
.数据（数据、功能（d）{
返回d.name；
})
.输入（）
.附加（“g”）
.attr（“类别”、“财务”）；
//每个组的名称
g、 附加（“文本”）
.文本（功能（d）{
返回d.name；
})
.样式（“填充”、“黑色”）
.attr（“转换”，函数（d，i）{
返回“translate（10），+（（i*sectionSpace）+（sectionSpace/2））+”）
})
//收集票据的团体
//这是财务组的子选择
var票据=g.append（“g”）
.attr（“转换”，函数（d，i）{
返回“translate（70）”+（（i*sectionSpace）+10+）”
})
.selectAll（“账单”）
//我们的数据是账单数量的范围
.数据（功能（d）{
//将其存储在数据中，以便以后使用
d、 numBills=Math.ceil（d.value/billWorth）；
返回d3.范围（d.范围）；
})
.输入（）
//每张账单一组
.附加（“g”）
.attr（“类别”、“账单”）
//各法案的立场
.attr（“变换”，函数（d，i，j）{
var trans=“”；
var x=Math.floor（d/numRows）*（billWidth+5）；//这是列
变量y=（（d%numRows）*（波高+5））；//这是行
trans+=“translate”（“+x+”，“+y+”）；
返回反式；
})
//开账单
账单
.append（“rect”）
//在最后一张账单上，将其缩短为表示部分价值
.attr（“宽度”，函数（d，i，j）{
如果（d==数据[j].numBills-1）{
返回billWidth*（（数据[j]。值%billWorth）/billWorth）；
}否则{
返回宽度；
}
})
.attr（“高度”，billHeight）
.style（“笔划”、“绿色”）
.样式（“填充”、“绿色”）；
账单
.append（“文本”）
.text（“$”）
.样式（“填充”、“白色”）
.attr（“x”，billWidth/2.3）
.attr（“y”，billHeight/1.5）；
d3.range（）