Javascript 无法使用d3.js将X标签与条形图中的相应条形图关联
我创建了一个列条形图,如中所示。但问题是,我无法将X轴标签与特定的条关联(直接在条下)。你能帮助我吗?我的代码如下Javascript 无法使用d3.js将X标签与条形图中的相应条形图关联,javascript,d3.js,Javascript,D3.js,我创建了一个列条形图,如中所示。但问题是,我无法将X轴标签与特定的条关联(直接在条下)。你能帮助我吗?我的代码如下 function drawColumnChart() { var dataArray_o, maxNum_f, canvas_o, canvas_top; dataArray_o = [ {name: "PS 1", value: "3000" }, {name: "PS 2", value: "1000" },
function drawColumnChart() {
var dataArray_o, maxNum_f, canvas_o, canvas_top;
dataArray_o = [
{name: "PS 1", value: "3000" },
{name: "PS 2", value: "1000" },
{name: "PS 3", value: "5000" },
{name: "PS 4", value: "2000" }
];
var values = [];
var names = [];
for (var index_i = 0; index_i < dataArray_o.length; index_i++) {
values.push(dataArray_o[index_i].value);
names.push(dataArray_o[index_i].name);
}
maxNum_f = Math.max.apply(null, values);
var margin = {top: 20, right: 20, bottom: 30, left: 40}
var w = 500 - margin.left - margin.right, h = 500 - margin.top - margin.bottom;
var yScale = d3.scale.linear().domain([0, maxNum_f]).rangeRound([0, h]);
var yScale1 = d3.scale.linear().domain([0, maxNum_f]).rangeRound([h, 0]);
var xScale = d3.scale.ordinal().rangeRoundBands([0, w], 0) ;
var yAxis = d3.svg.axis().scale(yScale1).ticks(5).orient("left");
var xAxis = d3.svg.axis().scale(xScale).orient("bottom").tickFormat(function(v){
console.log(v);
return v;
});
canvas_top= d3.select("#ColumnChart").append("svg").attr("height", h + margin.top + margin.bottom).attr("width", w + margin.left + margin.right);
canvas_o = canvas_top.append("g").attr("transform", "translate(50, 0)");
var rects = canvas_o.selectAll("rect");
var totalRect = h / 20 ;
var dArr = [];
for (var i = 0; i < totalRect; i++) {
dArr.push(i);
}
var bars2 = rects.data(dArr).enter().append("rect").attr("height", function(d){
return 20;
}).attr("width", w).attr("x", function(d, i){
return 0;
}).attr("y", function(d, i){
return i *20;
}).
attr("fill", function(d, i) {
if (i % 2 == 0) {
return "grey";
} else {
return "white";
}
}).attr("opacity", "0.08");
rects.data(dataArray_o).enter().append("rect").attr("class", "bar").attr("width", 15).attr("height", function(d) {
return yScale(d.value);
}).attr("x", function(d, i) {
return i*30 + 5;
}).
attr("y", function(d, i) {
return h - yScale(d.value);
}).attr("fill", "#330066");
canvas_top.selectAll("text").data(dataArray_o).enter().append("text").text(function(d) {
return d.value;
}).attr("text-anchor", "middle")
.attr("x", function(d, i) {
return i*30 + 10;
})
.attr("y", function(d) {
return h - yScale(d.value);
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "white");
xScale.domain(names);
canvas_top.append("g").attr("transform", "translate(50, 5)").call(yAxis);
canvas_top.append("g").
attr("transform", "translate(50," + h +")").
call(xAxis);
}
函数drawColumnChart(){
var dataArray\u o、maxNum\u f、canvas\u o、canvas\u top;
数据数组_o=[
{名称:“PS 1”,值:“3000”},
{名称:“PS 2”,值:“1000”},
{名称:“PS 3”,值:“5000”},
{名称:“PS 4”,值:“2000”}
];
var值=[];
变量名称=[];
对于(变量索引i=0;索引i
有什么想法吗?你看到了吗?拉尔斯,非常感谢你。虽然它没有给我直接的答案,但它给了我思考的指针。谢谢你的帮助。