Ajax D3.js中的分组条形图

带json数据的分组条形图

data={"data":"
[
{\"indzone\":\"DO3Zone\",\"totalplot\":1506,\"allotted\":604,\"vacant\":625,\"amenities\":27
}
,
{\"indzone\":\"MysuruZone\",\"totalplot\":1382,\"allotted\":752,\"vacant\":325,\"amenities\":27},

{\"indzone\":\"BallariZone\",\"totalplot\":920,\"allotted\":701,\"vacant\":65,\"amenities\":34},
{\"indzone\":\"BelagaviZone\",\"totalplot\":2650,\"allotted\":2188,\"vacant\":262,\"amenities\":45},   

]"}

---

我想为每个分配的区域、空置的区域和便利设施分组。如何使用d3.js实现这一点请检查下面的答案

身体{
字体：10px无衬线；
}
.轴线路径，
.轴线{
填充：无；
行程：#000；
形状渲染：边缘清晰；
}
.酒吧{
填充：钢蓝；
}
.x轴路径{
显示：无；
}
风险值数据=[
{
“indzone”：“DO3Zone”，
“totalplot”：1506，
“分配”：604，
“空缺”：625，
“便利设施”：27
},
{
“indzone”：“MysuruZone”，
“totalplot”：1382，
“分配”：752，
“空缺”：325，
“便利设施”：27
},
{
“indzone”：“巴拉里松”，
“totalplot”：920，
“分配”：701，
“空缺”：65，
“便利设施”：34
},
{
“indzone”：“BelagaviZone”，
“totalplot”：2650，
“分配”：2188，
“空缺”：262，
“便利设施”：45
}
];
var margin={顶部：20，右侧：20，底部：30，左侧：40}，
宽度=960-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
var x0=d3.scale.ordinal（）
.rangeRoundBands（[0，宽度]，.1）；
var x1=d3.scale.ordinal（）；
变量y=d3.scale.linear（）
.范围（[高度，0]）；
var color=d3.scale.ordinal（）
.范围（[“98abc5”、“8a89a6”、“7b6888”、“6b486b”、“a05d56”、“d0743c”、“ff8c00”）；
var xAxis=d3.svg.axis（）
.比例（x0）
.东方（“底部”）；
var yAxis=d3.svg.axis（）
.比例（y）
.东方（“左”）
.tick格式（d3格式（“.2s”）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
var ageNames=d3.keys（数据[0]）.filter（函数（键）{return（键！==“indzone”| |键！==“totalplot”）；}）；
data.forEach（函数（d）{
d、 ages=ageNames.map（函数（名称）{return{name:name，value:+d[name]}；}）；
});
域（data.map（函数（d）{return d.indzone；}））；
x1.domain（ageNames）.rangeRoundBands（[0，x0.rangeBand（）]）；
y、 域（[0，d3.max（数据，函数（d）{返回d3.max（d.ages，函数（d）{返回d.value；}；}）]）；
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）
.append（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，6）
.attr（“dy”，“.71em”）
.style（“文本锚定”、“结束”）
.文本（“人口”）；
var state=svg.selectAll（“.state”）
.数据（数据）
.enter（）.append（“g”）
.attr（“类别”、“状态”）
.attr（“transform”，函数（d）{return”translate（“+x0（d.indzone）+”，0）”；}）；
state.selectAll（“rect”）
.data（函数（d）{返回d.age；}）
.enter（）.append（“rect”）
.attr（“宽度”，x1.rangeBand（））
.attr（“x”，函数（d）{返回x1（d.name）；}）
.attr（“y”，函数（d）{返回y（d.value）；}）
.attr（“高度”，函数（d）{返回高度-y（d.value）；}）
.style（“fill”，函数（d）{返回颜色（d.name）；}）；
var legend=svg.selectAll（“.legend”）
.data（ageNames.slice（）.reverse（））
.enter（）.append（“g”）
.attr（“类”、“图例”）
.attr（“transform”，函数（d，i）{return“translate（0，+i*20+”）；}）；
图例。追加（“rect”）
.attr（“x”，宽度-18）
.attr（“宽度”，18）
.attr（“高度”，18）
.样式（“填充”，颜色）；
图例。追加（“文本”）
.attr（“x”，宽度-24）
.attr（“y”，9）
.attr（“dy”，“.35em”）
.style（“文本锚定”、“结束”）
.text（函数（d）{return d；}）；

我可以知道分组的方法吗？您正在寻找分组/堆叠条形图。请仅提供分组条形图的详细信息。我已经看到了该示例，但我无法对分配、空置、便利设施等字段进行分组。您能帮助我如何对json数据进行分组吗。您使用的是哪一版本的d3？是d3.v3还是d3.V4？是的，它工作正常。非常感谢