我使用d3创建了一个条形图。现在我想扩展x轴的高度,但无法找到如何做到这一点。高度attr不起作用,笔画attr只更新刻度文本。有没有办法在不改变文本标签的情况下扩展高度。
以下是我要做的事情的链接:Adding background color in d3 js bar chart using data values
答案 0 :(得分:1)
正如我在previous question中建议的那样,只需在追加轴之前添加一个矩形:
$match
以下是您更改的代码:
var orangeBox = svg.append("rect")
.attr("x", 0)
.attr("y", height)
.attr("width", width)
.attr("height", margin.bottom)
.attr("fill", "orange")
.attr("opacity", 0.2);

var mydata = {
"min": 68.9813,
"avg": 177.5037,
"max": 672.6713,
"values": [{
"bin": -50.0,
"percent": 0.0,
"samples": 0
}, {
"bin": 0.0,
"percent": 0.0,
"samples": 0
}, {
"bin": 50.0,
"percent": 6.7028,
"samples": 309
}, {
"bin": 100.0,
"percent": 32.2897,
"samples": 2407
}, {
"bin": 150.0,
"percent": 32.4565,
"samples": 3207
}, {
"bin": 200.0,
"percent": 17.1745,
"samples": 2064
}, {
"bin": 250.0,
"percent": 6.1833,
"samples": 940
}, {
"bin": 300.0,
"percent": 2.4971,
"samples": 444
}, {
"bin": 350.0,
"percent": 1.2438,
"samples": 279
}, {
"bin": 400.0,
"percent": 0.9262,
"samples": 182
}, {
"bin": 450.0,
"percent": 0.2781,
"samples": 71
}, {
"bin": 500.0,
"percent": 0.0962,
"samples": 24
}, {
"bin": 550.0,
"percent": 0.074,
"samples": 25
}, {
"bin": 600.0,
"percent": 0.0535,
"samples": 24
}, {
"bin": 650.0,
"percent": 0.0243,
"samples": 6
}, {
"bin": 700.0,
"percent": 0.0,
"samples": 0
}, {
"bin": 750.0,
"percent": 0.0,
"samples": 0
}, {
"bin": 800.0,
"percent": 0.0,
"samples": 0
}, {
"bin": 850.0,
"percent": 0.0,
"samples": 0
}, {
"bin": 900.0,
"percent": 0.0,
"samples": 0
}, {
"bin": 950.0,
"percent": 0.0,
"samples": 0
}, {
"bin": 1000.0,
"percent": 0.0,
"samples": 0
}],
"index": 7,
"time_h": 13.8529,
"stddev": 67.8836,
"samples": 9982
};
//set the dimensions and margins of the graph
var margin = {
top: 20,
right: 20,
bottom: 30,
left: 40
},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
// set the ranges
var x = d3.scaleBand()
.range([0, width])
.padding(0.1);
var y = d3.scaleLinear()
.range([height, 0]);
function make_x_gridlines() {
return d3.axisBottom(x)
.ticks(2)
}
// gridlines in y axis function
function make_y_gridlines() {
return d3.axisLeft(y)
.ticks(10)
}
// append the svg object to the body of the page
// append a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")")
.style('fill', 'black');;
// get the data
// d3.csv("sales.csv", function(error, data) {
// if (error) throw error;
// // format the data
// data.forEach(function(d) {
// d.sales = +d.sales;
// });
// Scale the range of the data in the domains
x.domain(mydata.values.map(function(d) {
return d.bin;
}));
y.domain([0, d3.max(mydata.values, function(d) {
return d.percent;
})]);
var redBox = svg.append("rect")
.attr("x", x(200) + x.bandwidth() / 2)
.attr("y", 0)
.attr("width", x(x.domain()[x.domain().length - 1]) - x(200) + x.bandwidth() / 2)
.attr("height", height)
.attr("fill", "red")
.attr("opacity", 0.2);
var orangeBox = svg.append("rect")
.attr("x", 0)
.attr("y", height)
.attr("width", width)
.attr("height", margin.bottom)
.attr("fill", "orange")
.attr("opacity", 0.2);
// append the rectangles for the bar chart
svg.selectAll(".bar")
.data(mydata.values)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) {
return x(d.bin) + (x.bandwidth() - 4) / 2;
})
.attr("width", Math.min(x.bandwidth(), 5))
.attr("y", function(d) {
return y(d.percent);
})
.attr("height", function(d) {
return height - y(d.percent);
});
svg.append("g")
.attr("class", "grid")
.attr("transform", "translate(0," + height + ")")
.call(make_x_gridlines()
.tickSize(-height)
.tickFormat("")
);
// add the Y gridlines
svg.append("g")
.attr("class", "grid")
.call(make_y_gridlines()
.tickSize(-width)
.tickFormat("")
);
// add the x Axis
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
// add the y Axis
svg.append("g")
.call(d3.axisLeft(y));