0

我试图在立体主义中以 1 小时的间隔制作 24 小时的轴。

var context = cubism.context()
    .serverDelay(30*1000)
    .step(10 * 60 * 1000) //The step size is 10 mins
    .size(window_width - 200);

d3.select("#viz").selectAll(".axis")
    .data(["top", "bottom"])
    .enter().append("div")
    .attr("class", function(d) { return d + " axis"; })
    .each(function(d) { d3.select(this).call(context.axis().ticks(d3.time.hours, 1).orient(d)); });

这条线 context.axis().ticks(d3.time.hours, 1).orient(d) 有点错误。由于轴文本重叠并且没有任何内容可见。我尝试了许多组合，例如 60 分钟、1 天，但似乎没有任何效果。谁能帮帮我吗。

4

1 回答 1

1

你误解了什么size。size并不表示您在屏幕上可用的像素数。它指示您拥有的数据点数，这反过来又是您显示数据所需的像素数。数据点的数量决定了大小，而不是相反。

您提到您的数据间隔为 24 小时，每 10 分钟有一个值。这使您的图表宽 144 像素，而不是window_width - 200您在size.

这也解释了为什么尽管您尽了最大的努力，您仍无法在轴上获得更多标签。Cubism 不想弄乱你的小图，所以它只允许你最多 3 或 4 个标签。

解决此问题的最佳方法是增加数据点的数量。您可以通过 2 种方式执行此操作：

  • 减少step到 1 或 2 分钟以获得更宽的图形（1 分钟提供 1440 像素宽的图像，2 分钟提供 720 像素宽的图像）。
  • 如果无法做到这一点，请将您的时间窗口增加到一周（1008 像素）。
于 2013-07-11T03:56:24.397 回答