d3.js - 如何增加绘图面积图的宽度和高度

Question

我不想增加 div 标签的高度和宽度。只是我只想增加图表的以下部分。我提到this code

我的html代码是:

<div id="myDiv" style="width: 480px; height: 400px;"></div>

我的plotly.js代码是:

var trace1 = {
x: ['2013-10-04 22:23:00', '2013-10-06 22:23:00',  '2013-11-04 22:23:00',       '2013-11-07 22:23:00','2013-12-04 22:23:00', '2013-12-08 22:23:00'],
y: [1, 3, 6,2, 4, 5],
fill: 'tozeroy',
type: 'scatter',
fillcolor: 'red'

};

var plotlyData = [trace1];                                      
plotly.newPlot('heap_memory_graph', plotlyData);
var plotDiv = document.getElementById('heap_memory_graph');

plotDiv.on('plotly_relayout',
 function(eventdata){  
   xValStart = new Date(eventdata['xaxis.range[0]']);
   xValEnd = new Date(eventdata['xaxis.range[1]']);
 });

当我将此图表放入我的应用程序中时，图表变得非常小。我尝试增加宽度和高度，但无法增加图表的这部分。

Answer 1

添加margin到 layout 并指定图形与周围框的距离(以像素为单位)。

var trace1 = {
x: ['2013-10-04 22:23:00', '2013-10-06 22:23:00',  '2013-11-04 22:23:00',       '2013-11-07 22:23:00','2013-12-04 22:23:00', '2013-12-08 22:23:00'],
y: [1, 3, 6,2, 4, 5],
fill: 'tozeroy',
type: 'scatter',
fillcolor: 'red'
};
var layout = {
  margin: {
    l: 20,
    r: 10,
    b: 40,
    t: 10
  },
};

var plotlyData = [trace1];                                      
Plotly.newPlot('heap_memory_graph', plotlyData, layout);
var plotDiv = document.getElementById('heap_memory_graph'); 

  
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

<div id="heap_memory_graph" style="width: 480px; height: 400px;"></div>