这里有一个关于jsfiddle的项目: http://jsfiddle.net/mLnB3/
我有一些数据是按照这个格式排列的:
我希望为每个分类创建一个条形图。因此,类别1将是一个条形图,类别2将是一个条形图,依此类推(有更多类别)。每个类别都有不同数量的子类别,每个子类别的评论数量也不同(范围从1到30)。在每个条形图中,评论将填充X轴。因此,对于每个图表,我需要生成类似以下内容的东西:
我正在使用d3.select("body").selectAll("svg").data(data).enter().append("svg")来创建它们。
我的问题是,由于每个不同的图表将具有不同数量的xAxis刻度,我不知道如何为每个图表的xAxis设置序数比例尺的域。对于yAxis的线性比例尺也存在同样的问题,因为我通常会使用[0,d3.max(...)],但对于每个条形图来说,这个值也是不同的。
这是我目前的内容:
当然,这会导致矩形和文本元素上的轴线、宽度、高度、x 和 y 属性变得混乱。这是一个基本的条形图模板,我已经使用过几次,当我只有一个 xscale 域和一个 yscale 域时,它总是正常工作的。
那么,我该如何设置 xScale 域?yScale 域呢?我怎样从一个 Category 中获取每个注释,并说“这些将成为此图表的 xScale”?请记住,一些图表将有 30 条评论,一些将有 7 条评论,一些将具有最多 200 条评论,而另一些将仅具有最多 2 条评论。它们对于每个图表来说都是不同的。因此,如果我正在使用 d3 为数据数组中的每个类别创建一个 SVG 元素,我该如何解决这个问题?
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="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>
我正在使用d3.select("body").selectAll("svg").data(data).enter().append("svg")来创建它们。
我的问题是,由于每个不同的图表将具有不同数量的xAxis刻度,我不知道如何为每个图表的xAxis设置序数比例尺的域。对于yAxis的线性比例尺也存在同样的问题,因为我通常会使用[0,d3.max(...)],但对于每个条形图来说,这个值也是不同的。
这是我目前的内容:
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");
当然,这会导致矩形和文本元素上的轴线、宽度、高度、x 和 y 属性变得混乱。这是一个基本的条形图模板,我已经使用过几次,当我只有一个 xscale 域和一个 yscale 域时,它总是正常工作的。
那么,我该如何设置 xScale 域?yScale 域呢?我怎样从一个 Category 中获取每个注释,并说“这些将成为此图表的 xScale”?请记住,一些图表将有 30 条评论,一些将有 7 条评论,一些将具有最多 200 条评论,而另一些将仅具有最多 2 条评论。它们对于每个图表来说都是不同的。因此,如果我正在使用 d3 为数据数组中的每个类别创建一个 SVG 元素,我该如何解决这个问题?