想要减少 Plotly.JS 热图和来自另一个 div 的文本之间的 padding/space - 需要 CSS

Question

我有一个运行良好的 Plotly.JS 热图，我有一些描述性文本想放在它上面单独的 div，但是差距看起来有点尴尬。不知何故，我正在努力减少填充，以便我的文本（例如，我的描述）和热图靠得更近。我尝试使用 CSS，但我显然不喜欢。我确定这是一个简单的答案，而且我忽略了一些简单的事情。感谢任何帮助。

代码笔：https://codepen.io/tenebris_silentio/pen/eYzgZMw

<!DOCTYPE html>

  <head>
    <!-- Load plotly.js into the DOM -->
    <script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
  </head>
<br>

My description.

    <div id='myDiv'><br> </div>
  </div>
</div><script>

var colorscaleValue = [
  [0, '#ADD8E6'],
  [1, '#000080']
];
  var data = [
    {

      z: [[41, 60, 25, 24, 28], [56, 27, 14, 45, 17], [47, 17, 12, 47, 17]],
      x: ['Geographical', 'Temporal', 'Cultural', 'Digital', 'Financial'],
      y: ['Category 1', 'Category 2', 'Category 3'],

      colorscale: colorscaleValue,
      type: 'heatmap',

      hovertemplate: '<b># of %{y} Projects with a %{x} classification</b>: %{z}' + '<extra></extra>',

      hoverongaps: true
    }
  ];

  var layout = {
    title: '',
    width: 900,
    height: 560,
    autosize: false,
    yaxis: {automargin: true}
  };

  Plotly.newPlot('myDiv', data, layout);

  </script><!-- Plotly chart will be drawn inside this DIV --></div></div></div>

  <style>

.myDiv{
    padding: -1px;
}

  </style>

Answer 1

因为 Plotly.JS 正在生成 SVG，所以很难设置它的样式。一种解决方案是使用绝对位置设置元素样式，这样您就可以使其与 SVG“重叠”。

例如：

var colorscaleValue = [
  [0, '#ADD8E6'],
  [1, '#000080']
];
  var data = [
    {

      z: [[41, 60, 25, 24, 28], [56, 27, 14, 45, 17], [47, 17, 12, 47, 17]],
      x: ['Geographical', 'Temporal', 'Cultural', 'Digital', 'Financial'],
      y: ['Category 1', 'Category 2', 'Category 3'],

      colorscale: colorscaleValue,
      type: 'heatmap',

      hovertemplate: '<b># of %{y} Projects with a %{x} classification</b>: %{z}' + '<extra></extra>',

      hoverongaps: true
    }
  ];

  var layout = {
    title: '',
    width: 900,
    height: 560,
    autosize: false,
    yaxis: {automargin: true}
  };

  Plotly.newPlot('myDiv', data, layout);

  </script><!-- Plotly chart will be drawn inside this DIV --></div></div></div>

.myDiv{
    padding: -1px;
}

p {
  position: absolute;
  z-index: 10;
  margin-top: 45px;
  margin-left: 80px;
}

<p>My description.</p>
<div id='myDiv'></div>
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>

Answer 2

您可以在布局中使用 margin configuration：

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

<!DOCTYPE html>

  <head>
    <!-- Load plotly.js into the DOM -->
    <script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
  </head>
<br>

My description.

    <div id='myDiv'><br> </div>
  </div>
</div><script>

var colorscaleValue = [
  [0, '#ADD8E6'],
  [1, '#000080']
];
  var data = [
    {

      z: [[41, 60, 25, 24, 28], [56, 27, 14, 45, 17], [47, 17, 12, 47, 17]],
      x: ['Geographical', 'Temporal', 'Cultural', 'Digital', 'Financial'],
      y: ['Category 1', 'Category 2', 'Category 3'],

      colorscale: colorscaleValue,
      type: 'heatmap',

      hovertemplate: '<b># of %{y} Projects with a %{x} classification</b>: %{z}' + '<extra></extra>',

      hoverongaps: true
    }
  ];

  var layout = {
    title: '',
    width: 900,
    height: 560,
    autosize: false,
    margin: {
      t: 10
    },
    yaxis: {automargin: true}
  };

  Plotly.newPlot('myDiv', data, layout);

  </script><!-- Plotly chart will be drawn inside this DIV --></div></div></div>

  <style>

.myDiv{
    padding: -1px;
}

  </style>

Answer 3

为什么不在布局本身中添加文本？

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

想要减少 Plotly.JS 热图和来自另一个 div 的文本之间的 padding/space - 需要 CSS

Want to reduce padding/space between Plotly.JS heatmap and text from another div - need CSS

html

javascript

css

plotly

plotly.js