Question

我正在尝试创建一个日历（24小时，7个工作日），每小时显示一些数据点。由于我没有每小时的数据（因此不想将其余部分留空），我想用空矩形预填充网格。

我遇到的问题是我知道如何通过首先创建一个空对象来解决这个问题（因此对于每个工作日我们创建24个数据点，总计7 * 24）。但是在我看来，这是一种相当低效的方式，因为我们首先必须创建空对象，所以它会减慢网站的速度。

以下是当前代码：

var test = svg.selectAll(".time")
    .data(emptyarray)
    .enter().append("rect")
    .attr("x", function(d) { return (d.time) * gridSize; })
    .attr("y", function(d) { return (d.weekday) * gridSize; })
    .attr("rx", 4)
    .attr("ry", 4)
    .attr("class", "bordered")
    .attr("width", gridSize)
    .attr("height", gridSize)
    .style("fill", colors[0]);

我已经尝试了几种解决方案，即一些for循环结构，但这导致了它只在某个位置显示1个矩形而不是用矩形填充整个网格的问题。关于如何解决这个问题的任何建议？

谢谢！

Answer 1

如何在绘制之前简单地过滤emptyarray？例如

var test = svg.selectAll(".time")
    .data(emptyarray.filter(function(d){ return d !== undefined; }))
    .enter().append("rect")
    .attr("x", function(d) { return (d.time) * gridSize; })
    .attr("y", function(d) { return (d.weekday) * gridSize; })
    .attr("rx", 4)
    .attr("ry", 4)
    .attr("class", "bordered")
    .attr("width", gridSize)
    .attr("height", gridSize)
    .style("fill", "green");

如果你想要空矩形（SVG DOM中的空<rect>比空的javascript对象更浪费资源），你可以：

var test = svg.selectAll(".time")
    .data(emptyarray)
    .enter().append("rect")
    .attr("x", function(d, i) { 
        return d === undefined ? i*gridSize : (d.time) * gridSize; 
    })
    .attr("y", function(d, i) { 
        return d === undefined ? i*gridSize : (d.weekday) * gridSize; 
    })
    .attr("rx", 4)
    .attr("ry", 4)
    .attr("class", function(d){ 
        return d === undefined ? "invisible": "bordered"; 
    })
    .attr("width", gridSize)
    .attr("height", gridSize)
    .style("fill", "green");

添加css

.invisible{
        visibility: hidden;
}

如果您还没有，我建议您阅读D3 time scale documentation。您可以考虑从时间到像素位置映射的比例，例如

var x = d3.time.scale()
    .range([0, width]);

以及d3.time.week等可以将日期整齐地“舍入”到最近的间隔（例如，周）。

在D3.js中用空矩形填充网格？

1 个答案: