d3JS v5从嵌套数据中为分组的条形图指定域 [英] d3JS v5 specifying domains from nested data for grouped bar charts
问题描述
我正在使用d3JS v5(也可以包含lodash). 我有作为变量来的数据:
I am using d3JS v5 (can include lodash as well). I have data which comes as a variable:
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)，并将每个Title的条形作为第二层. RFU是条形的高度，条形根据条形颜色进行着色. 我正在使用nest函数根据ID对数据进行分组.我不确定这是否是必需的，但是我能够创建一个新数组，如下:
Eventually I would like to group the data as per the ID (i.e. have the x axis ticks be the ids), and have bars for each Title as the second layer. The RFU is the height of the bars and the bars be colored as per the barcolor. I was playing around with the nest function to group the data as per IDs. I am not sure if this is required or not but I was able to create a new array as:
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的新手，并且仍在学习中.如果需要更多信息，请告诉我.
I am not able to generate a grouped bar with the code below. It only makes the axis, without the ticks or bars. I believe it is mainly because I am not specifying the correct way to reach to the values in the arrays to specify the x0domain, x1domain and the ydomain. Although I could be completely wrong :). Any help is appreciated. If this question is silly, please forgive me as I am new to D3js and still learning. If more information is needed, please let me know.
更新1:.RFU数据以整数而不是字符串的形式出现(已删除").
Update 1: The RFU data comes as integers and not strings (removed the "").
谢谢.
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");
推荐答案
经过大量搜索，我发现了一个示例，该示例的数据结构与我的相似.我使用了 Brice Pierre de la Briere
After much searching I found out an example which had data structure similar to mine. I used the following block by Brice Pierre de la Briere
https://bl.ocks.org/bricedev/0d95074b6d83a77dc3ad
这是我最后一张图表的方框.它还具有突出显示栏，因此即使用户将鼠标放在其上方的空白处，其下方的栏也会被突出显示.
Here is my block with the final chart. It also has highlight bars so that even if users put the mouse in empty space above the bars, the bars under it will get highlighted.
https://bl.ocks.org/Coola85/b05339b65a7f9b082ca210d307a3e469
这篇关于d3JS v5从嵌套数据中为分组的条形图指定域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
