【发布时间】：2018-04-29 13:59:47
【问题描述】：
我正在使用 d3JS v5（也可以包括 lodash）。 我有作为变量的数据：
var groupeddata = [{Title: "Dummy Data", ID: "46", RFU:20291, barcolor: "#ff7f00"},
{Title: "Dummy Data", ID: "50", RFU:63, barcolor: "#ff7f00"},
{Title: "Dummy Data", ID: "56", RFU:6, barcolor: "#ff7f00"},
{Title: "Dummy Data2", ID: "46", RFU:21, barcolor: "#ff7f00"},
{Title: "Dummy Data2", ID: "50", RFU:18095, barcolor: "#ff7f00"},
{Title: "Dummy Data2", ID: "56", RFU:27278, barcolor: "#ff7f00"}];
最终我想根据 ID 对数据进行分组（即，将 x 轴刻度作为 ID），并将每个标题的条形图作为第二层。 RFU 是条形的高度，条形根据条形颜色着色。 我正在使用嵌套函数来根据 ID 对数据进行分组。我不确定这是否需要，但我能够创建一个新数组：
var databyID = d3.nest()
.key(function(d) { return d.ID;})
.entries(groupeddata);
console.log(databyID);
输出：
[{key: "46", values:[
{Title: "Dummy Data", ID: "46", RFU:20291, barcolor: "#ff7f00"},
{Title: "Dummy Data2", ID: "46", RFU:21, barcolor: "#ff7f00"}]
},
{key: "50", values:[
{Title: "Dummy Data", ID: "50", RFU:63, barcolor: "#ff7f00"},
{Title: "Dummy Data2", ID: "50", RFU:18095, barcolor: "#ff7f00"}]
},
{key: "56", values:[
{Title: "Dummy Data", ID: "56", RFU:6, barcolor: "#ff7f00"},
{Title: "Dummy Data2", ID: "56", RFU:27278, barcolor: "#ff7f00"}]
}]
我无法使用以下代码生成分组条形图。它只制作轴，没有刻度线或条形图。 我相信这主要是因为我没有指定正确的方法来访问数组中的值来指定 x0domain、x1domain 和 ydomain。虽然我可能完全错了:)。任何帮助表示赞赏。 如果这个问题很愚蠢，请原谅我，因为我是 D3js 的新手并且还在学习。如果需要更多信息，请告诉我。
更新 1： RFU 数据以整数而非字符串的形式出现（删除了“”）。
谢谢。
var groupeddata = [{Title: "Dummy Data", ID: "46", RFU:"20291", barcolor: "#ff7f00"},
{Title: "Dummy Data", ID: "50", RFU:"63", barcolor: "#ff7f00"},
{Title: "Dummy Data", ID: "56", RFU:"6", barcolor: "#ff7f00"},
{Title: "Dummy Data2", ID: "46", RFU:"21", barcolor: "#ff7f00"},
{Title: "Dummy Data2", ID: "50", RFU:"18095", barcolor: "#ff7f00"},
{Title: "Dummy Data2", ID: "56", RFU:"27278", barcolor: "#ff7f00"}];
console.log(groupeddata);
var databyID = d3.nest()
.key(function(d) {
return d.ID;
})
.entries(groupeddata);
console.log(databyID);
divWidth = 700;
var margin = {top: 30, right: 100, bottom: 50, left: 100, },
width = divWidth - margin.left - margin.right,
height = 250 - margin.top - margin.bottom,
x0 = d3.scaleBand()
.range([0, width - 20], 0.1)
.domain(databyID.map(function(d) {
d.values.map(function(c) {
return c.ID;
}); })),
x1 = d3.scaleBand()
.domain(databyID.map(function(d) {
d.values.map(function(c) {
return c.Title;
}); })),
y = d3.scaleLinear()
.range([height, 0])
.domain([0, d3.max(databyID, function(d) {
d.values.map(function(c) {
return c.RFU;
}); })]);
//setup the axis
var xAxis = d3.axisBottom(x0);
var yAxis = d3.axisLeft(y);
var groupedbardiv = d3.select("#groupedBars")
.append("svg")
.attr("width", width + margin.left + margin.right - 100)
.attr("height", height + margin.top + margin.bottom - 10)
.append("g")
.attr("transform", "translate (" + margin.left + "," + margin.top + ")");
//create the x-axis
groupedbardiv.append("g")
.attr("class", "x axis")
.attr("transform", "translate (0, " + height + ")")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "middle")
.attr("dx", "0em")
.attr("dy", "-0.55em")
.attr("y", 30)
.attr("class", "x-axisticks");
groupedbardiv.append("text")
.attr("tranform", "rotate(0)")
.attr("class", "x axis")
.attr("x", width)
.attr("y", height)
.attr("dy", "0.5em")
.attr("text-anchor", "end")
.text("ID")
.attr("transform", "rotate(0)");
//create the y-axis
groupedbardiv.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("class", "y axis")
.attr("tranform", "rotate(-90)")
.attr("y", -10)
.attr("dy", "0.8em")
.attr("dx", "3em")
.attr("text-anchor", "end")
.text("RFU")
.attr("transform", "rotate(-90)");
var bar = groupedbardiv.selectAll("bar")
.data(databyID)
.enter()
.append("rect")
.style("fill", barcolors)
.attr("x", function(d) {
return x0(d.ID);
})
.attr("width", x0.bandwidth() - 0.1)
.attr("y", function(d) {
return y(d.values.RFU);
})
.attr("height", function(d) {
return height - y(d.values.RFU);
})
.attr("fill-opacity", "1.0")
.attr("class", "y-data");
【问题讨论】：
-
您需要每个 ID 的 RFU 总和吗？
-
不是总和...只是每个标题每个 ID 的单个 RFU 级别。
标签： javascript arrays d3.js multidimensional-array nested