Как я могу установить цвет фона элемента SVG, который содержит тепловую карту D3? - PullRequest
Новая
       58

Как я могу установить цвет фона элемента SVG, который содержит тепловую карту D3?

0 голосов
/ 29 января 2019

Я строю тепловую карту, которая отображает активность аккаунта в твиттере в течение недели.Мой набор данных состоит из массива диктонар, содержащих день недели, час и количество повторений комбинации день / час.Поскольку обычно люди прекращают твитировать в течение ночи, в наборе данных не существует некоторых комбинаций день + час.Моя проблема в том, что когда я рисую прямоугольники, я могу нарисовать их только для существующих комбинаций, а несуществующие остаются пустыми.Это ссылка на результат, надеюсь, она прояснит ситуацию:

enter image description here

Как видите, между 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); });

Спасибо за помощь.

1 Ответ

0 голосов
/ 29 января 2019

Добавьте большой белый 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); });
...