d3 v4 scaleBand 刻度

Posted 2023-04-14

【中文标题】d3 v4 scaleBand 刻度

【英文标题】：d3 v4 scaleBand ticks

【发布时间】：2016-10-23 03:05:42

【问题描述】：

我有如下数据

日期，值 2016-10-01,10 2016-10-02,20 2016-10-03,30 2016-10-04,5 2016-10-05,50 2016-10-06,2 2016-10-07,7 2016-10-08,17

并正在使用以下代码生成条形图

var margin = top: 20, right: 20, bottom: 70, left: 40,
width = 800 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;

var parseDate = d3.timeParse("%Y-%m-%d");

var x = d3.scaleBand().range([0, width]);

var y = d3.scaleLinear().range([height, 0]);

var xAxis = d3.axisBottom(x);

var yAxis = d3.axisLeft(y);

var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) 
return "<strong>Month of " + d.date + ":</strong> <span style='color:red'>" + d.value + " sales</span>";
)

var svg = d3.select("#barg").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 + ")");
svg.call(tip);
data = d3.csvParse(d3.select("pre#data2").text());
data.forEach(function(d) 
d.date = parseDate(d.date);
d.value = +d.value;
);

x.domain(data.map(function(d)  return d.date; ));
y.domain([0, d3.max(data, function(d)  return d.value; )]);

svg.append("g")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis)
  .selectAll("text")
  .style("text-anchor", "end")
  .attr("dx", "-.8em")
  .attr("dy", "-.55em")
  .attr("transform", "rotate(-90)" )

svg.append("g")
  .call(yAxis)
  .append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", 6)
  .attr("dy", ".71em")
  .style("text-anchor", "end")
  .text("Value ($)");

svg.selectAll(".bar")
  .data(data)
  .enter().append("rect")
  .attr("class", "bar")
  .attr("x", function(d)  return x(d.date); )
  .attr("width", x.bandwidth() - 5)
  .attr("y", function(d)  return y(d.value); )
  .attr("height", function(d)  return height - y(d.value); )
  .on('mouseover', tip.show)
  .on('mouseout', tip.hide)

所以我遇到的问题是我有序数数据，但对于大基数（例如，120 个数据点）x 轴有太多的刻度。我尝试了一些类似tickValues 的东西，但是当我使用它时，我的 x 轴刻度点都显示在彼此之上。理想情况下，当基数很高时，我想要 10 个左右的刻度点。有什么想法吗？

【参考方案1】：

这确实可以使用tickValues 来完成。例如，在这个演示中，我们有 200 个值，所以轴绝对拥挤：

var svg = d3.select("body")
  .append("svg")
  .attr("width", 500)
  .attr("height", 100);

var data = d3.range(200);

var xScale = d3.scaleBand()
  .domain(data.map(function(d) return d))
  .range([10, 490]);

var xAxis = d3.axisBottom(xScale);

var gX = svg.append("g").call(xAxis);

<script src="https://d3js.org/d3.v4.min.js"></script>

现在，同样的代码使用tickValues：

var svg = d3.select("body")
  .append("svg")
  .attr("width", 500)
  .attr("height", 100);

var data = d3.range(200);

var xScale = d3.scaleBand()
  .domain(data.map(function(d) return d))
  .range([10, 490]);

var xAxis = d3.axisBottom(xScale)
  .tickValues(xScale.domain().filter(function(d,i) return !(i%10)));

var gX = svg.append("g").call(xAxis);

<script src="https://d3js.org/d3.v4.min.js"></script>

在最后一个 sn-p 中，tickValues 使用 remainder operator 来显示每 10 个刻度中的 1 个：

.tickValues(xScale.domain().filter(function(d,i) 
    return !(i%10)
));

【讨论】：

我正在尝试使用您的代码来调整我的代码。你知道为什么我的刻度值在 x 轴上都是重叠的吗？

在我看来，您使用的是 JS 日期，但您没有使用时间刻度。尝试删除d.date = parseDate(d.date); 看看会发生什么。

其实如果你不介意我创建了一个jsFiddle，你可以看看吗？

啊，等等，我现在可能已经想通了。我删除了 parseDate 函数，并将 return d.date 添加到域中。谢谢它现在很好用！

我不断得到tickValues 它不是一个函数？？

【参考方案2】：

这是使用tickFormat(...) 解决此问题的一般解决方案。我们可以为我们的刻度定义一个最小可接受的宽度，然后根据这个最小值跳过每 n 个刻度。

d3
    .axisBottom(xScale)
    .tickFormat((t, i) => 
        const MIN_WIDTH = 30;
        let skip = Math.round(MIN_WIDTH * data.length / chartWidth);
        skip = Math.max(1, skip);

        return (i % skip === 0) ? t : null;
    );

let skip = ... 是不等式ChartWidth / (NumTicks / N) > MinWidth 的重新排列。这里N 表示刻度“步长”，因此我们断言每个第 n 个刻度的宽度大于可接受的最小宽度。如果我们重新排列不等式来解决N，我们可以确定要跳过多少刻度才能达到我们想要的宽度。