Question

我试图制作一个24小时的轴，立体主体间隔1小时。

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天，但似乎没有任何效果。任何人都可以帮助我。

Answer 1

你误解了size的作用。 size未指明屏幕上可用的像素数。它表示您拥有的数据点数，而这又是您需要显示数据的像素数。数据点的数量决定了尺寸，不是反过来。

您提到您的数据间隔为24小时，每10分钟一次。这使得您的图表宽度为144 px，而不是window_width - 200中的size。

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

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

将step缩短为1或2分钟以获得更宽的图形（1分钟可获得1440像素宽的图像，2分钟可获得720像素宽的图像）。
如果无法做到，请将时间窗口增加到一周（1008像素）。

轴为1天，立体主义步长为10分钟

1 个答案: