Javascript 想要减少Plotly.JS热图和其他div文本之间的填充/空间-需要CSS吗

我有一个Plotly.JS热图，它工作得很好，我有一些描述性的文本，我想把它放在一个单独的div中，但是这个间隙看起来有点尴尬。不知何故，我正在努力减少填充，以便使我的文本（例如，我的描述和热图）更加接近。我尝试过使用CSS，但我显然不喜欢。我相信这是一个简单的答案，我忽略了一些简单的事情。感谢您的帮助

代码笔：

---

因为Plotly.JS正在生成SVG，所以不容易对其进行样式化。一种解决方案是使用position-absolute设置元素的样式，这样就可以使其与SVG重叠

例如：

var colorscaleValue=[ [0，'添加8E6']， [1, '000080'] ]; 风险值数据=[ { z:[41,60,25,24,28]，[56,27,14,45,17]，[47,17,12,47,17]， x:[‘地理’、‘时间’、‘文化’、‘数字’、‘金融’]， y:[‘一类’、‘二类’、‘三类’]， colorscale:colorscaleValue， 类型：'热图'， hovertemplate:“%{y}个项目的%{x}分类：%{z}+,， 是的 } ]; 变量布局={ 标题：， 宽度：900， 身高：560， 自动调整大小：false， yaxis:{automargin:true} }; Plotly.newPlot'myDiv'，数据，布局； myDiv先生{ 填充：-1px； } p{ 位置：绝对位置； z指数：10； 边缘顶部：45像素； 左边距：80px； } 我的描述

---

因为Plotly.JS正在生成SVG，所以不容易对其进行样式化。一种解决方案是使用position-absolute设置元素的样式，这样就可以使其与SVG重叠

例如：

var colorscaleValue=[ [0，'添加8E6']， [1, '000080'] ]; 风险值数据=[ { z:[41,60,25,24,28]，[56,27,14,45,17]，[47,17,12,47,17]， x:[‘地理’、‘时间’、‘文化’、‘数字’、‘金融’]， y:[‘一类’、‘二类’、‘三类’]， colorscale:colorscaleValue， 类型：'热图'， hovertemplate:“%{y}个项目的%{x}分类：%{z}+,， 是的 } ]; 变量布局={ 标题：， 宽度：900， 身高：560， 自动调整大小：false， yaxis:{automargin:true} }; Plotly.newPlot'myDiv'，数据，布局； myDiv先生{ 填充：-1px； } p{ 位置：绝对位置； z指数：10； 边缘顶部：45像素； 左边距：80px； } 我的描述

您可以在布局中使用：

var layout = {
  // ...
    margin: {
      t: 10
    },
  // ...

我的描述。 var colorscaleValue=[ [0，'添加8E6']， [1, '000080'] ]; 风险值数据=[ { z:[41,60,25,24,28]，[56,27,14,45,17]，[47,17,12,47,17]， x:[‘地理’、‘时间’、‘文化’、‘数字’、‘金融’]， y:[‘一类’、‘二类’、‘三类’]， colorscale:colorscaleValue， 类型：'热图'， hovertemplate:“%{y}个项目的%{x}分类：%{z}+,， 是的 } ]; 变量布局={ 标题：， 宽度：900， 身高：560， 自动调整大小：false， 保证金：{ t:10 }, yaxis:{automargin:true} }; Plotly.newPlot'myDiv'，数据，布局； myDiv先生{ 填充：-1px； } 您可以在布局中使用：

var layout = {
  // ...
    margin: {
      t: 10
    },
  // ...

我的描述。 var colorscaleValue=[ [0，'添加8E6']， [1, '000080'] ]; 风险值数据=[ { z:[41,60,25,24,28]，[56,27,14,45,17]，[47,17,12,47,17]， x:[‘地理’、‘时间’、‘文化’、‘数字’、‘金融’]， y:[‘一类’、‘二类’、‘三类’]， colorscale:colorscaleValue， 类型：'热图'， hovertemplate:“%{y}个项目的%{x}分类：%{z}+,， 是的 } ]; 变量布局={ 标题：， 宽度：900， 身高：560， 自动调整大小：false， 保证金：{ t:10 }, yaxis:{automargin:true} }; Plotly.newPlot'myDiv'，数据，布局； myDiv先生{ 填充：-1px； }

---

为什么不在版面中添加文本呢

var layout = {
  "title": {"text": "My description."},
  ...
};

---

为什么不在版面中添加文本呢

var layout = {
  "title": {"text": "My description."},
  ...
};

---

在热图元素中，有一个svg类：main svg。这是应该有如下内容的元素：top:-100px；因为包含单独文本的div已经在脚本中添加了边框，所以为其添加样式并不重要。这是应该有如下内容的元素：top:-100px；因为您的div中有单独的文本，它已经在您的脚本边缘，所以添加样式并没有关系。谢谢。我想到了这一点，尽管我在格式方面没有那么大的灵活性。另外，我还有大约3句话需要补充。谢谢。我想到了这一点，尽管我在格式方面没有那么大的灵活性。另外，我还有大约3句话需要补充。