仅将数据集中的值显示到 X 轴刻度中

Question

我在这方面遇到了麻烦。我正在使用 d3.js 制作折线图。我无法在数据电子表格中显示仅使用日期值的 X 轴刻度文本。当我开发折线图时，我看到它自动生成了数据电子表格中的值之间的日期值。这是数据的一个简单示例。

date,close 
16-Dec-12,53.98
16-Dec-12,67.00
16-Dec-12,89.70
16-Dec-12,99.00
16-Dec-12,130.28
23-Dec-12,166.70
23-Dec-12,234.98
23-Dec-12,345.44
23-Dec-12,443.34
23-Dec-12,543.70
23-Dec-12,580.13
30-Dec-12,605.23
30-Dec-12,622.77
30-Dec-12,626.20
30-Dec-12,628.44
30-Dec-12,636.23
30-Dec-12,633.68

所以在这个数据集中，它有 3 个不同的日期值。

在 D3 折线图中，我只想在 x 轴刻度文本中显示 3 个不同的日期值，它们是周。但是，图表是在这些数据日期值之间的其他日期生成的。下面的例子。

我试图这样显示，只显示数据集中的日期值。

我希望这是有道理的。这可能吗？我尝试使用 .tick() 但它只显示 '16-Dec-12' 这让我很困惑。我对 d3.js 的折线图很陌生 =/

这是我的 sn-p 代码。我希望这会有所帮助。

function getExtent(member) {
            var extents = [];
            dataset.forEach(function(arry){
                extents = extents.concat(d3.extent(arry,function(d){return d[member]}));
            }); 
            return d3.extent(extents);
        }

            var xScale = d3.time.scale().domain(getExtent('x')).range([0,width]);
        var yScale = d3.scale.linear().domain(getExtent('y')).range([height,0]);

        var xAxis = d3.svg.axis()
                    .scale(xScale)
                    .orient('bottom');
xAxis.scale(xScale)
                    .tickFormat(d3.time.format('%b %d'));

        var yAxis = d3.svg.axis()
                    .scale(yScale)
                    .orient('left');

        var lineFunc = d3.svg.line()
                        .x(function(d){return xScale(d.x)})
                        .y(function(d){return yScale(d.y)})
                        .interpolate('linear');
        var g = svg.append('g')
                    .attr('width',width)
                    .attr('height',height)
                    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

        // Use this group for drawing the lines
        g.append('g')
            .attr('class', 'line-group');

        // Axes
        g.append('g')
            .attr('class', 'usps-multiline axis axis--x')
            .attr('transform', 'translate(0,' + height + ')')
            .call(xAxis)
            .selectAll("text")
            .attr("transform", "translate(-40,20) rotate(315)");

        g.append('g')
            .attr('class', 'usps-multiline axis axis--y')
            .call(yAxis);

**如果您可以查看示例图片，请告诉我。

Answer 1

这是时间尺度的预期行为。在 D3 中，轴是自动生成的，您对刻度没有太多控制权。

最简单的选择似乎是将数据中包含的日期数组传递给tickValues：

var axis = d3.axisBottom(scale)
    .tickValues(uniqueValues);

这里，uniqueValues 是一个数组，其中包含您在 CSV 中的日期，仅过滤为唯一日期（否则您将在同一位置有多个刻度）。

这是您共享的 CSV 的演示：

var svg = d3.select("svg");
var csv = `date,close 
16-Dec-12,53.98
16-Dec-12,67.00
16-Dec-12,89.70
16-Dec-12,99.00
16-Dec-12,130.28
23-Dec-12,166.70
23-Dec-12,234.98
23-Dec-12,345.44
23-Dec-12,443.34
23-Dec-12,543.70
23-Dec-12,580.13
30-Dec-12,605.23
30-Dec-12,622.77
30-Dec-12,626.20
30-Dec-12,628.44
30-Dec-12,636.23
30-Dec-12,633.68`;
var data = d3.csvParse(csv, function(d) {
  d.date = d3.timeParse("%d-%b-%y")(d.date);
  return d
});
var uniqueValues = [...new Set(data.map(function(d) {
  return d.date.getTime()
}))].map(function(d) {
  return new Date(d);
});
var scale = d3.scaleTime()
  .range([30, 570])
  .domain(d3.extent(data, function(d) {
    return d.date
  }));
var axis = d3.axisBottom(scale)
  .tickValues(uniqueValues);
var gX = svg.append("g")
  .attr("transform", "translate(0,50)")
  .call(axis);

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="600" height="100"></svg>

PS：我在demo中使用的是D3 v4，但是原理是一样的。

Answer 2

如果 .ticks(3) 不起作用，您可以将自定义函数传递给 .ticks 以确保获得所需的刻度。

这里是一个相当的comprehensive axis tutorial。