d3，对于每个选择使用不同的X刻度和Y刻度域 [英] d3 using a different X scale and Y scale domain for each selection
问题描述
这里是jsfiddle的项目： http://jsfiddle.net/mLnB3/
我有以下格式的数据：
var data = [
{
category：Category1，
subcategories：[
{
subcategory：Subcategory1A，
comments：[
{
comment：1Acomment1，
count：8，
}，
{
comment：1Acomment2
count：7
}
]
}，
{
subcategory：Subcategory1B，
comments [
{
comment：1Bcomment1，
count：11，
}
]
}，
{
subcategory：Subcategory1C，
comments：[
{
comment：1Ccomment1，
count：2，
}
]
}
]
}，
{
category：Category2，
subcategories：[
{
subcategory：Subcategory2A，
comments：[
{
comment：2Acomment1，
count 6，
}，
{
comment：2Acomment2，
count：9，
}，
{
comment：2Acomment3，
count：9，
}，
{
comment：2Acomment4，
count：9 ，
}
]
}，
{
subcategory：Subcategory2B，
comments：[
{
comment：2Bcomment1，
count：14
}
]
}
]
}
];
我想为每个类别创建一个条形图。因此，类别1将是条形图，类别2将是条形图，等等（还有更多类别）。每个类别具有不同数量的子类别，每个子类别具有不同数量的注释（范围从1到30）。在每个条形图中，注释将填充X轴。所以对于每个图表我需要产生这样的：
< svg id =Category1>
< g>
< g class =xAxis> ...< / g>
< g class =yAxis> ...< / g>
< g class =subcategoryid =Subcategory1A>
< g class =commentid =1Acomment1>
< rect height =8>< / rect>
< text> 8< / text>
< / g>
< g class =commentid =1Acomment2>
< rect height =7>< / rect>
< text> 7< / text>
< / g>
< / g>
< g class =subcategoryid =Subcategory1B>
< g class =commentid =1Bcomment1>
< rect height =11>< / rect>
< text> 11< / text>
< / g>
< / g>
< g class =subcategoryid =Subcategory1C>
< g class =commentid =1Ccomment1>
< rect height =2>< / rect>
< text> 2< / text>
< / g>
< / g>
< / g>
< / svg>
< svg id =Category2>
...
< / svg>
我使用d3.select（body）。selectAll（svg）。data （data）.enter（）。append（svg）....来创建它们。
我的问题是， xAxis ticks的数量我不知道如何为每个图表的xAxis设置ordinal scale的域。与yAxis的线性标度相同的问题，因为我通常为那个[0，d3.max（...）]，但是对于每个条形图也是不同的。
这是我到目前为止：
var margin = {top：20，right： bottom：20，left：20}，
width = 400 - margin.left - margin.right，
height = 300 - margin.top - margin.bottom;
var xScale = d3.scale.ordinal（）
//。domain（??? help ???）
.rangeRoundBands（[0，width]，.3 ）;
var yScale = d3.scale.linear（）
//。domain（??? help ???）
.range（[height，0]）;
var xAxis = d3.svg.axis（）
.scale（xScale）
.orient（bottom）;
var yAxis = d3.svg.axis（）
.scale（yScale）
.orient（left）
.ticks（5）;
var svg = d3.select（body）。selectAll（svg）
.data（data）
.enter（）
.append svg）
.attr（width，width + margin.left + margin.right）
.attr（height，height + margin.top + margin.bottom）
.attr（id，function（d）{return d.category}）
.append（g）
.attr（transform，translate（+ margin.left + ，+ margin.top +））;
svg.append（g）
.attr（class，x axis）
.attr（transform height +））
.call（xAxis）
.selectAll（text）
.style（text-anchor，end）
.attr transform，function（d）{
returnrotate（-25）
}）;
svg.append（g）
.attr（class，y axis）
.call（yAxis）;
var subcategory = svg.selectAll（。subcategory）
.data（function（d）{return d3.values（d.subcategories）;}）
.enter （）
.append（g）
.attr（class，subcategory）
.attr（id，function（d）{return d.subcategory;} ）;
var comment = subcategory.selectAll（。comment）
.data（function（d）{return d3.values（d.comments）;}）
.enter （）
.append（g）
.attr（class，comment）
.attr（id，function（d）{return d.comment;} ）;
comment.append（rect）
.attr（height，function（d）{
return height - yScale（d.count）;
}
.attr（width，xScale.rangeBand（）/ 2）
.attr（y，function（d）{
return yScale（d.count）;
}）;
comment.append（text）
.text（function（d）{
return d.count;
}）
.attr x，xScale.rangeBand（）/ 2）
.attr（y，function（d）{
return yScale（d.count） - 5;
}）
.attr（text-anchor，middle）
.attr（fill，＃353535）
.attr（font-weight，bold）;
这当然会使轴和宽度，高度，x和y属性矩形和文本元素都疯了。这是一个基本的条形图模板，我使用了几次，总是工作正常，当我只有1个xscale域和1个yscale域。
那么如何设置xScale域吗？和yScale域？如何从类别中获取每个注释，并说这些将是此图表的xScale？记住，一些图表将有30条评论，一些将有7条评论，一些将有最大注释计数200，一些将有最大注释计数2.他们是每个图表的变量。因此，如果我使用d3为数据数组中的每个类别创建一个SVG元素，我该如何解决这个问题？
解决方案对于每个类别图表，xScale和yScale将有所不同，因为它们具有不同的域（在y量表的情况下为最大值）。因此，我建议您在每次调用中创建单独的 小提示
d3.select（body）。selectAll（svg）
.data（data）
.enter（）
.append（svg）
.attr（width，width + margin.left + margin.right）
.attr + margin.top + margin.bottom）
.attr（id，function（d）{return d.category}）
.append（g）
.attr transform（+ margin.left +，+ margin.top +））
.each（function（d，i）{
var svg = d3.select ）;
var allComments = d.subcategories.reduce（function（prev，curr，i，array）{
return prev.concat（curr.comments）;
}，[]）;
var xDomain = allComments.reduce（function（prev，curr，i，array）{
prev.push（curr.comment）;
return prev;
} ）;
var yMax = d3.max（allComments，function（comment）{
return comment.count;
}）
var xScale = d3.scale.ordinal（）
.domain（xDomain）
.rangeRoundBands（[0，width]，.3）;
var yScale = d3.scale.linear（）
.domain（[0，yMax + 2]）//给定ticks特定的填充
.range（[height，0 ]）;
var xAxis = d3.svg.axis（）
.scale（xScale）
.orient（bottom）;
var yAxis = d3.svg.axis（）
.scale（yScale）
.orient（left）
.ticks（5）;
svg.append（g）
.attr（class，x axis）
.attr（transform，translate 0，+ height +））
.call（xAxis）
.selectAll（text）
.style（text-anchor，end）
.attr（transform，function（d）{
returnrotate（-25）
}）;
....
Here is the project on jsfiddle: http://jsfiddle.net/mLnB3/
I have data that is in this format:
var data = [
{
"category": "Category1",
"subcategories": [
{
"subcategory": "Subcategory1A",
"comments": [
{
"comment" : "1Acomment1",
"count": 8,
},
{
"comment": "1Acomment2",
"count": 7
}
]
},
{
"subcategory": "Subcategory1B",
"comments": [
{
"comment": "1Bcomment1",
"count": 11,
}
]
},
{
"subcategory": "Subcategory1C",
"comments": [
{
"comment": "1Ccomment1",
"count": 2,
}
]
}
]
},
{
"category": "Category2",
"subcategories": [
{
"subcategory": "Subcategory2A",
"comments": [
{
"comment": "2Acomment1",
"count": 6,
},
{
"comment": "2Acomment2",
"count": 9,
},
{
"comment": "2Acomment3",
"count": 9,
},
{
"comment": "2Acomment4",
"count": 9,
}
]
},
{
"subcategory": "Subcategory2B",
"comments": [
{
"comment": "2Bcomment1",
"count": 14
}
]
}
]
}
];
I want to create a bar chart for each category. So Category 1 will be a bar chart, Category 2 will be a bar chart, and so on (there are many more categories). Each category has a different number of subcategories and each subcategory has a different number of comments (ranging from 1 - 30). In each bar chart, the comments will be populating the X axis. So for each chart I need to produce something like this:
<svg id="Category1">
<g>
<g class="xAxis">...</g>
<g class="yAxis">...</g>
<g class="subcategory" id="Subcategory1A">
<g class="comment" id="1Acomment1">
<rect height="8"></rect>
<text>8</text>
</g>
<g class="comment" id="1Acomment2">
<rect height="7"></rect>
<text>7</text>
</g>
</g>
<g class="subcategory" id="Subcategory1B">
<g class="comment" id="1Bcomment1">
<rect height="11"></rect>
<text>11</text>
</g>
</g>
<g class="subcategory" id="Subcategory1C">
<g class="comment" id="1Ccomment1">
<rect height="2"></rect>
<text>2</text>
</g>
</g>
</g>
</svg>
<svg id="Category2">
...
</svg>
I'm using d3.select("body").selectAll("svg").data(data).enter().append("svg").... to create them all.
My problem is that since each different chart will have a different number of xAxis ticks I have no idea how to set the domain for the ordinal scale for each chart's xAxis. Same problem with the linear scale for the yAxis because I normally do [0, d3.max(...)] for that one, but that will be different for each bar chart as well.
This is what I have so far:
var margin = {top: 20, right: 20, bottom: 20, left: 20},
width = 400 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
var xScale = d3.scale.ordinal()
//.domain(???help???)
.rangeRoundBands([0, width], .3);
var yScale = d3.scale.linear()
//.domain(???help???)
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(5);
var svg = d3.select("body").selectAll("svg")
.data(data)
.enter()
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.attr("id", function(d){return d.category})
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("transform", function(d) {
return "rotate(-25)"
});
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
var subcategory = svg.selectAll(".subcategory")
.data(function(d){ return d3.values(d.subcategories);})
.enter()
.append("g")
.attr("class", "subcategory")
.attr("id", function(d){return d.subcategory;});
var comment = subcategory.selectAll(".comment")
.data(function(d){return d3.values(d.comments);})
.enter()
.append("g")
.attr("class", "comment")
.attr("id", function(d){return d.comment;});
comment.append("rect")
.attr("height", function(d){
return height - yScale(d.count);
})
.attr("width", xScale.rangeBand()/2)
.attr("y", function(d){
return yScale(d.count);
});
comment.append("text")
.text(function(d){
return d.count;
})
.attr("x", xScale.rangeBand() / 2)
.attr("y", function(d){
return yScale(d.count) - 5;
})
.attr("text-anchor", "middle")
.attr("fill", "#353535")
.attr("font-weight", "bold");
This, of course, makes the axes and the width, height, x, and y attributes on the rectangle and text elements go all crazy. This is following a basic bar chart template that I've used several times and always works fine when I only have 1 xscale domain and 1 yscale domain.
So how do I set the xScale domain? And yScale domain? How do I grab each comment out of a Category and say "these will be the xScale for this chart"? Remember, some of the charts will have 30 comments, some will have 7 comments, some will have a max comment count of 200 some will have a max comment count of 2. They are variable for each chart. So if I'm using d3 to create an SVG element for each category in the data array, how do I solve this?
解决方案 The xScale and yScale is going to vary for each category chart, because they have different domains (max value in the case of the y scale). Therefore I'd recommend you create separate ones within an each call as in this fiddle
d3.select("body").selectAll("svg")
.data(data)
.enter()
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.attr("id", function(d){return d.category})
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.each(function(d, i){
var svg = d3.select(this);
var allComments = d.subcategories.reduce(function(prev, curr, i, array){
return prev.concat(curr.comments);
}, []);
var xDomain = allComments.reduce(function(prev, curr, i, array){
prev.push(curr.comment);
return prev;
}, []);
var yMax = d3.max(allComments, function(comment) {
return comment.count;
})
var xScale = d3.scale.ordinal()
.domain(xDomain)
.rangeRoundBands([0, width], .3);
var yScale = d3.scale.linear()
.domain([0, yMax + 2]) // giving ticks specific padding
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(5);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("transform", function(d) {
return "rotate(-25)"
});
....
这篇关于d3，对于每个选择使用不同的X刻度和Y刻度域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
