d3.js 勾选值未按预期工作
我是一个d3菜鸟。我有一个看起来接近我想要的图表。
现在，多年来的 xlabel 都是硬编码的。像这样：
.call(d3.axisBottom(xScale)
.ticks([1850, 1900, 1950, 2000]));
不过，我想将刻度线更新为动态的，以便标签每 5 年左右出现一次，并且我不需要对它们进行硬编码。
我的代码如下所示：
<body>
<div id="container" class="svg-container"></div>
<script>
//--------------------------PREPARATION--------------------------//
//------------------------SVG PREPARATION------------------------//
var width = 960;
var height = 500;
var margin = 5;
var padding = 5;
var adj = 20;
// we are appending SVG first
var svg = d3.select("div#container").append("svg")
.attr("preserveAspectRatio", "xMinYMin meet")
//.attr("viewBox", "-20 -20 1600 1600")
.attr("viewBox", "-" + adj + " -"+ adj + " " + (width + adj) + " " + (height + adj*2))
.style("padding", padding)
.style("margin", margin)
.classed("svg-content", true);
//-----------------------SCALES PREPARATION----------------------//
var xScale = d3.scaleBand()
.rangeRound([0, width])
.paddingInner(0.05);
var yScale = d3.scaleLinear()
.rangeRound([height, 0]);
//------------------------DATA PREPARATION-----------------------//
var dataset = d3.csv("q3.csv");
dataset.then(function(data) {
data.map(function(d) {
d.running_total = +d.running_total;
return d;});
});
dataset.then(function(data) {
xScale.domain(data.map(function(d) {return d.year}))
yScale.domain([0, d3.max(data, function(d)
{return d.running_total; })]);
});
console.log(dataset);
dataset.then(function (data) {
svg.selectAll("div")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d){
return xScale(d.year);
})
.attr("y", function (d) {
return yScale(d.running_total);
})
.attr("width", xScale.bandwidth())
.attr("height", function (d) {
return height - yScale(d.running_total);
});
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(xScale)
.ticks([1850, 1900, 1950, 2000]));
svg.append("g")
.attr("class", "axis")
.call(d3.axisLeft(yScale));
});
</script>
</body>
我尝试将刻度设置为我想要的标签数量，如下所示：.ticks(50)但这不起作用（所有标签都显示出来）
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(xScale)
.ticks(50));
API解释了您的问题：axis.ticks()对频段比例没有影响。
如果比例尺没有实现scale.ticks，则此方法无效，就像带状比例尺和点比例尺一样。（强调我的）
因此，为了每 5 年拥有一个标签，您可以做的是过滤量表的域：
.call(d3.axisBottom(xScale).tickValues(xScale.domain().filter(function(_, i) {
return !(i % 5);
})));