Question

我有以下.tsv文件格式：

date    Edward Snowden    Urban Gardening    Barack Obama

2014-W15    14  3   34

2014-W16    3   5   54

2014-W17    5   15  34

我希望x轴上显示的日期具有从文件中提取的最小值和最大值，其他值在y轴上为三行。

var parseDate = d3.time.format("%Y-W%U").parse;
d3.tsv("test.tsv", function(data) {
          data.forEach(function(d) {
            d.date = parseDate(d.date);
          });

          //set min max values of axis
          x.domain(d3.extent(data, function(d) { return d.date; }));
});

我刚刚提取了那段代码，不确定它是否可以用作最小的例子。但是，问题是根据文件中的值没有x轴扩展。对于date格式为%Y%m%d的其他文件，它正在运行。

Answer 1

您的格式问题就像saikiran所说：唯一正确的值就是年份。您的最小值和最大值是相同的，因为同一年内传递的每个日期都被解析为：

Wed Jan 01 2014 00:00:00 GMT + 0100（浪漫标准时间）

我知道这是因为我执行了以下代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <title>barcode chart</title>   
    <style>
        body {height:100vh !important;}
    </style>
</head>
<body>
    <div id="chart">
    </div>



    <script src='http://d3js.org/d3.v3.min.js'></script>
    <script>

    var parseDate = d3.time.format("%Y-W%U").parse;
    var date1 = parseDate("2014-W16");
    var date2 = parseDate("2015-W25");
    var date3 = parseDate("2014-W36");

    console.log(date1);
    console.log(date2);
    console.log(date3);

    </script>
</body>
</html>

浏览器中的结果如下：

Wed Jan 01 2014 00:00:00 GMT+0100 (Romance Standard Time)
Thu Jan 01 2015 00:00:00 GMT+0100 (Romance Standard Time)
Wed Jan 01 2014 00:00:00 GMT+0100 (Romance Standard Time)

2015年1月1日是唯一的原因是因为2015年有价值作为输入。

所以我想你需要找到一种方法来获得真实日期，或者你也可以尝试使用序数量表。另外，请注意不要混合使用轴和刻度。具有域和范围的输出值使用比例计算。显示值（作为刻度）的轴使用刻度来表示其刻度。我这样说，因为在你的代码中我看到以下内容：

//set min max values of axis
x.domain(d3.extent(data, function(d) { return d.date; }));

但是x不能是轴函数，因为d3.svg.axis（）没有域函数。只是说;-)。

有关序数尺度的更多信息，请参见here

修改

以下是我将如何实现序数比例：

d3.tsv("test.tsv", function(data) { var xDomainValues = []; //you need an array for your domain data.forEach(function(d) { xDomainValues.push(d.date); //d.date is a string value here, but that is ok }); //this ordinal scale will calculate a value between 0 and graphWidth //for each value in the xDomainValues array var xScale = d3.scale.ordinal() .domain(xDomainValues) .rangeRoundPoints([0, graphWidth]); var xAxis = d3.svg.axis() .scale(xScale) .orient("bottom"); //I oriented the tick texts on the bottom. });

xAxis现在应该按照您的意图很好地扩展。我会认真考虑在你的情况下使用序数量表，但要注意：我不是D3专家，我只是熟悉基础知识。

文件中的值不使用x.domain在D3.js中展开为x轴？

1 个答案: