Я использую 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"}];
В конце концов, я хотел бы сгруппировать данные по идентификатору (то есть иметь тики по оси x как идентификаторы) и иметь столбцы для каждого заголовка в качестве второго слоя. RFU - это высота столбцов, и столбцы должны быть окрашены в соответствии с цветом стержня.
Я играл с функцией гнезда, чтобы сгруппировать данные по идентификаторам. Я не уверен, требуется ли это или нет, но я смог создать новый массив как:
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");