Javascript d3.js标记值未按预期工作_Javascript_D3.js

Javascript d3.js标记值未按预期工作

javascript d3.js

Javascript d3.js标记值未按预期工作,javascript,d3.js,Javascript,D3.js,我是一个D3Noob。我有一张图表，看起来很接近我想要的。现在，多年来的XLabel都是硬编码的。像这样： .call(d3.axisBottom(xScale) .ticks([1850, 1900, 1950, 2000])); 然而，我想更新的记号是动态的，这样标签显示每5年左右，我不需要硬编码这些下面是我的代码的样子： <body> <div id="container" class="svg-con

我是一个D3Noob。我有一张图表，看起来很接近我想要的。

现在，多年来的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>

解释您的问题：

axis.ticks（）

对带刻度没有影响

如果刻度未实现scale.ticks，则此方法无效，如带刻度和点刻度。（强调矿山）

因此，每5年有一个标签，您可以做的是过滤量表的域：

.call(d3.axisBottom(xScale).tickValues(xScale.domain().filter(function(_, i) {
  return !(i % 5);
})));

解释您的问题：

axis.ticks（）

对带刻度没有影响

如果刻度未实现scale.ticks，则此方法无效，如带刻度和点刻度。（强调矿山）

因此，每5年有一个标签，您可以做的是过滤量表的域：

.call(d3.axisBottom(xScale).tickValues(xScale.domain().filter(function(_, i) {
  return !(i % 5);
})));

太美了！谢谢。它太漂亮了！非常感谢。