这是关于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="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属性变得疯狂 . 这是一个基本的条形图模板,我已经多次使用,当我只有1个xscale域和1个yscale域时,它总能正常工作 .
那么我该如何设置xScale域?和yScale域名?如何从类别中获取每个注释并说“这些将是此图表的xScale”?请记住,一些图表将有30条评论,一些图表将有7条评论,一些图表的最大评论数量为200,一些图表的最大评论数量为2.它们对于每个图表都是可变的 . 因此,如果我使用d3为数据数组中的每个类别创建一个SVG元素,我该如何解决这个问题呢?
2 回答
xScale和yScale将针对每个类别图表而变化,因为它们具有不同的域(在y比例的情况下为最大值) . 因此,我建议您在每个调用中创建单独的调用,如fiddle
听起来您需要在数据集中找到值范围 . 为此,您可以执行以下操作: