我是D3JS的新手,尝试使用嵌套的json数组来显示条形图.Below是我的json。
[
{
"image":"suresh.jpg",
"name":"Suresh",
"email":"abc@gmail.com",
"barValues":[
{
"letter":"A",
"frequency":".04253"
},
{
"letter":"B",
"frequency":".12702"
},
{
"letter":"C",
"frequency":".02288"
}
]
}
]
以下是我的D3代码。
$scope.showDetails = function(relatedData) {
$http.get("searchInfo.json").success(function(response) {
var x = response;
$scope.data = [];
var searchT = relatedData;
var margin ={top:20, right:30, bottom:30, left:20},
width=360-margin.left- margin.right,
height=200-margin.top-margin.bottom;
var x = d3.scale.ordinal().rangeRoundBands([0, width], .1);
var y = d3.scale.linear().range([height, 0]);
var chart = d3.select("#chart")
.append("svg")
.attr("width", 600)
.attr("height", height+margin.top+margin.bottom);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
d3.json(searchT+'Details.json', function(error, data){
x.domain(data.map(function(d){ return d.letter}));
y.domain([0, d3.max(data, function(d){return d.frequency})]);
var bar = chart.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("transform", function(d, i){
return "translate("+x(d.letter)+", 0)";
});
bar.append("rect")
.attr("y", function(d) {
return margin.top+margin.right;
})
.attr("x", function(d,i){
return x.rangeBand()+(margin.left/4);
})
.attr("height", function(d) {
return height - y(d.frequency);
})
.attr("width", 29);
bar.append("text")
.attr("x", x.rangeBand()+margin.left )
.attr("y", function(d) { return y(d.frequency) -10; })
.attr("dy", ".75em")
.text(function(d) { return d.frequency; });
chart.append("g")
.attr("class", "x axis")
.attr("transform", "translate("+margin.left+","+ height+")")
.call(xAxis);
chart.append("g")
.attr("class", "y axis")
.attr("transform", "translate("+margin.left+",0)")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Frequency");
});
});
};
}
我无法获得X轴和Y轴值。我尝试过不同的方式,但没有工作。可以帮助我,谢谢。