D3 Floorplan нестандартный цвет тепловых карт

Я хотел бы покрасить тепловые карты в библиотеке D3 Floorplan с помощью пользовательских шестнадцатеричных значений. Например, "heatmap1 = '# 000'".

https://github.com/dciarletta/d3-floorplan

В нем говорится, что он использует http://colorbrewer2.org/ для своей функциональности цвета.

Я хотел бы, чтобы цвет тепловых карт менялся в соответствии со скользящей временной шкалой, которую может скользить пользователь. Другими словами, если это январь 2016 года, тепловая карта зеленого цвета, а если февраль 2016 года, тепловая карта красного цвета.

У кого-нибудь есть пример, как этого добиться?

Источник

2 ответа

Решение

Хорошо, способ явно редактировать цвета - это делать то, что сказал Марк, изменив CSS, а затем:

heatmap.colorMode(['custom']);
heatmap.customThresholds([1, 2, 3]); // choose the values you want to indicate a change of colour

Затем обновите карту:

mapdata[heatmap.id()] = data.heatmap;
d3.select("#demo")
    .datum(mapdata)
    .call(map);

Затем вы изменяете значение в элементе JSON Heatmaps, и это соотносится с именами классов, т.е. ".d6-6".

Источник

Цвета определены в d3.floorplan.css как

.RdYlBu .d6-6 {fill:#D73027;background:#D73027;color:#121212}
.RdYlBu .d6-5 {fill:#FC8D59;background:#FC8D59;color:#121212}
.RdYlBu .d6-4 {fill:#FEE090;background:#FEE090;color:#121212}
.RdYlBu .d6-3 {fill:#E0F3F8;background:#E0F3F8;color:#121212}
.RdYlBu .d6-2 {fill:#91BFDB;background:#91BFDB;color:#121212}
.RdYlBu .d6-1 {fill:#4575B4;background:#4575B4;color:#121212}

Вы можете просто переопределить эти определения в своем собственном css и загрузить его после d3.floorplan.css

Бегущий пример:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Floor Plan - local coordinate map layers for D3.js</title>
  <script data-require="d3@2.10.0" data-semver="2.10.0" src="//cdnjs.cloudflare.com/ajax/libs/d3/2.10.0/d3.v2.js"></script>
  <script type="text/javascript" src="http://dciarletta.github.io/d3-floorplan/d3.floorplan.min.js"></script>
  <style type="text/css">
    @import url('http://dciarletta.github.io/d3-floorplan/d3.floorplan.css');
    body {
      font-size: 14px;
      font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
      margin: 50px auto 20px;
      width: 720px;
      background: #fcfcfc;
      line-height: 1.45em;
    }
    
    a {
      color: #555;
    }
    
    a:hover {
      color: #000;
    }
    
    ul {
      margin: 0 20px;
      padding: 0;
    }
    
    div.code {
      border: 1px solid #ccc;
      background: #eee;
      margin: 10px 0 10px 0;
      padding: 10px;
      width: 720px;
    }
    
    .RdYlBu .d6-6 {fill:red;background:#D73027;color:#121212}
    .RdYlBu .d6-5 {fill:green;background:#FC8D59;color:#121212}
    .RdYlBu .d6-4 {fill:purple;background:#FEE090;color:#121212}
    .RdYlBu .d6-3 {fill:black;background:#E0F3F8;color:#121212}
    .RdYlBu .d6-2 {fill:orange;background:#91BFDB;color:#121212}
    .RdYlBu .d6-1 {fill:blue;background:#4575B4;color:#121212}
    
  </style>
</head>

<body>

  <div id="demo"></div>

  <script id="demo-code" type="text/javascript">
    var xscale = d3.scale.linear()
      .domain([0, 50.0])
      .range([0, 720]),
      yscale = d3.scale.linear()
      .domain([0, 33.79])
      .range([0, 487]),
      map = d3.floorplan().xScale(xscale).yScale(yscale),
      imagelayer = d3.floorplan.imagelayer(),
      heatmap = d3.floorplan.heatmap(),
      vectorfield = d3.floorplan.vectorfield(),
      pathplot = d3.floorplan.pathplot(),
      overlays = d3.floorplan.overlays().editMode(true),
      mapdata = {};

    mapdata[imagelayer.id()] = [{
      url: 'http://dciarletta.github.io/d3-floorplan/Sample_Floorplan.jpg',
      x: 0,
      y: 0,
      height: 33.79,
      width: 50.0
    }];

    map.addLayer(imagelayer)
      .addLayer(heatmap)
      .addLayer(vectorfield)
      .addLayer(pathplot)
      .addLayer(overlays);

    d3.json("http://dciarletta.github.io/d3-floorplan/demo-data.json", function(data) {
      mapdata[heatmap.id()] = data.heatmap;
      mapdata[overlays.id()] = data.overlays;
      mapdata[vectorfield.id()] = data.vectorfield;
      mapdata[pathplot.id()] = data.pathplot;

      d3.select("#demo").append("svg")
        .attr("height", 487).attr("width", 720)
        .datum(mapdata).call(map);
    });
  </script>


</body>

</html>

Источник
Другие вопросы по тегам