0

0我正在尝试为日历月（2013 年 5 月）中的每一天绘制一个值，其中日期形成 x 轴。数据是从一个 HTML 表格中提取出来的，该表格提供了一个包含 35 个条目的日历，就像 iCal 等桌面日历一样。所以 x 刻度刻度数据如下所示：

   var xtix = ["28", "29", "30", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "1"];

都是字符串数据。同时，x 尺度范围数据如下所示：

var range = [40, 56, 71, 87, 103, 119, 134, 150, 166, 181, 197, 213, 229, 244, 260, 276, 291, 307, 323, 339, 354, 370, 386, 401, 417, 433, 449, 464, 480, 496, 511, 527, 543, 559, 574];

我正在使用以下代码创建 x 轴：

var xscale = d3.scale.ordinal().domain(xtix).range(range);
var xaxis = d3.svg.axis().scale(xscale).orient('bottom').ticks(xtix);
svg.append('g').attr('class', 'axis xaxis').attr('transform', 'translate(0,'+(h-20)+')').call(xaxis);

一个问题是刻度未正确显示在轴上。到 5 月 27 日之前一切都很好，然后下一个刻度是 31，就这样。就像 d3 忽略了数组中的重复项。这是一张图片：

在此处输入图像描述

此外，当我使用以下内容绘制我的观点时：

dataset[0].pointdata = [[40, 8], [56, 8], [71, 6], [87, 6], [103, 4], [119, 3], [134, 5], [150, 5], [166, 5], [181, 4], [197, 5], [213, 6], [229, 6], [244, 5], [260, 5], [276, 4], [291, 3], [307, 4], [323, 6], [339, 6], [354, 7], [370, 6], [386, 6], [401, 4], [417, 3], [433, 5], [449, 4], [464, 4], [480, 4], [496, 6], [511, 7], [527, 7], [543, 8], [559, 7], [574, 5]];
var g = svg.append('svg:g').attr('class', 'pathgroup').attr('transform', 'translate(0,'+ypadding+')');
g.selectAll('circle')
  .data(dataset[j].pointdata)
  .enter()
  .append('circle')
  .attr('cx', function(d) { return xscale(d[0]); })
  .attr('cy', function(d) { return yscale(d[1]); })
  .attr('r', 3)
  .attr('stroke-width', 2)
  .attr('class', 'color'+dataset[j].color);

这些点以错误的顺序显示在图表中。前四个数据点放置在图表的末尾（没有刻度），然后第五个数据点依次显示在现有刻度上。

我还在绘制周视图，效果很好，使用基本相同的方法，但 xtix 变量包含以下内容：

var xtix = ["May 5", "May 6", "May 7", "May 8", "May 9", "May 10", "May 11"];

这似乎根本不会混淆 d3。这真的很奇怪，真的希望有人能帮忙。

4

0 回答 0