使用SVG时的Heatmap.js

目标:

我正在尝试在SVG图像上叠加热图,我在SVG内有一系列多边形,我想根据数据有条件地进行着色。以下是该SVG(而非整个系列)的示例。我已经在标题中添加了Heatmap.min.js文件,当我添加绘制彩色区域所必需的Javascript时,它仅在引用SVG外部的div时才起作用。

<svg version='1.1' id='Map' class='' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 800 300' xml:space='preserve'>
   <polygon id='Brain' class='' points='180,23,177,18,173,15,169,13,165,12,161,11,156,151,146,142,138,134,17,131,20,128,126,27,124,31,123,35,40,184,34,182,28' />
   <polygon id='Shoulder_Left_Front' class='' points='91,115,97,112,104,110,108,117,107,119,127,143,95,157,70,148,71,140,72,133,77,82,119' />
</svg> 

//这直接来自heatmap.js网站,并标记为基本代码需求。

显示一些代码:

var heatmapInstance = h337.create({

  container: document.querySelector('.heatmap')
});


var points = [];
var max = 0;
var width = 840;
var height = 400;
var len = 200;

while (len--) {
  var val = Math.floor(Math.random()*100);
  max = Math.max(max,val);
  var point = {
    x: Math.floor(Math.random()*width),y: Math.floor(Math.random()*height),value: val
  };
  points.push(point);
}

var data = {
  max: max,data: points
};

heatmapInstance.setData(data);

描述您尝试过的方法:

我已经更改了document.querySelector内部的.heatmap,并且可以获取hotmap的颜色来更改div级别,但是我无法选择SVG或Polygons。有人对此有任何想法吗?

JMG987654321 回答:使用SVG时的Heatmap.js

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/3057214.html

大家都在问