d3.js滴答值无法正常工作

如何解决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,2000]));

    svg.append("g")
        .attr("class","axis")
        .call(d3.axisLeft(yScale));
});

</script>
</body>

我尝试将刻度设置为我想要的标签数量：.ticks(50)，但没有用（所有标签都显示了）

svg.append("g")
    .attr("class"," + height + ")")
    .call(d3.axisBottom(xScale)
            .ticks(50));

解决方法

API解释了您的问题：axis.ticks()对带刻度无效。

如果比例尺未实现scale.ticks（如 band 和点比例尺），则此方法无效。（强调我的）

因此，您每5年拥有一个标签可以做的是过滤秤的范围：

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

d3.js滴答值无法正常工作

如何解决d3.js滴答值无法正常工作

解决方法

相关推荐