Question

我正在构建一个热图，其中显示了该帐户在一周内的推文活动。我的数据集由一系列字典组成，其中包含工作日，小时以及工作日+小时组合重复多少次的计数。由于通常人们在晚上不发推文，因此数据集中不存在某些平日+小时组合。我的问题是，当我绘制矩形时，只能为现有组合绘制它们，而不存在的组合则保持空白。这是结果的链接，希望可以使事情更清楚：

如您所见，在2:00和8:00之间有空白。

我不知道如何解决这个问题，但是我想我可以在给包含现有组合的矩形着色之前为整个热图赋予白色背景，以使不存在的矩形变为白色而不是空白。我怎样才能做到这一点？如果这不可能，那么我的问题是否还有其他解决方案？

这是我的代码：

[var data = timestamps_final;

var days = \["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"\], times = \["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"\];

var margin = { top: 40, right: 50, bottom: 40, left: 50 };

var w = Math.max(Math.min(window.innerWidth, 1000), 500) - margin.left - margin.right - 20,ngridSize = Math.floor(w / times.length), h = gridSize * (days.length + 2);

var svg = d3.select("#heat_map")
        .append("svg")
        .attr("width", w + margin.top + margin.bottom)
        .attr("height", h + margin.left + margin.right)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var colours = d3.scaleLinear()
        .range(\["#F0C881", "#F244C7", "#173490",\])
        .domain(\[1, 50, 100\]);

var dayLabels = svg.selectAll(".dayLabel")
        .data(days)
        .enter()
        .append("text")
        .text(function (d) { return d; })
        .attr("x", 0)
        .attr("y", function (d, i) { return i * gridSize; })
        .style("text-anchor", "end")
        .style('fill', 'white')
        .attr("transform", "translate(-6," + gridSize / 1.5 + ")")

var timeLabels = svg.selectAll(".timeLabel")
        .data(times)
        .enter()
        .append("text")
        .text(function (d) { return d; })
        .attr("x", function (d, i) { return i * gridSize; })
        .attr("y", 0)
        .style("text-anchor", "middle")
        .style('fill', 'white')
        .attr("transform", "translate(" + gridSize / 2 + ", -6)");

var rectangles = svg.selectAll("rect")
        .data(data)
        .enter()
        .append("rect")
        .attr("x", function (d) { return d.hour * 36; })
        .attr("y", function (d) { return d.weekday * 36; })
        .attr("width", 36)
        .attr("height", 36)
        .style("stroke-width", 1)
        .style("stroke", "white")
        .style("fill", function (d) { return colours(d.value); });

谢谢您的帮助。

Answer 1

添加大白rect，然后再添加周+小时矩形

svg.append("rect")
    .style("fill", "white")
    .attr("width", 36 * 24)
    .attr("height", 36 * 7);

var rectangles = svg.selectAll("rect")
        .data(data)
        .enter()
        .append("rect")
        .attr("x", function (d) { return d.hour * 36; })
        .attr("y", function (d) { return d.weekday * 36; })
        .attr("width", 36)
        .attr("height", 36)
        .style("stroke-width", 1)
        .style("stroke", "white")
        .style("fill", function (d) { return colours(d.value); });

如何设置包含D3热图的svg元素的背景颜色？

1 个答案: