Question

我有三个轴，我试图通过使用CSS来调整它们的位置，但它不能正常工作，你可以在jsfiddle中看到。

我想左边的前两个轴和右边的第三个轴。如果可能的话，我希望第三个高度更大但宽度更小。我该如何调整呢？

HTML

<div id="XAxis" class="left" ></div>
<div id="YAxis" class="left" ></div>
<div id="XYAxis" class="right" ></div>

CSS

div form p.left {
    float: left;
    clear: both;
}
div form p.right {
    float: right;
    clear: both;
}

的JavaScript

var d3 = Plotly.d3;
var gd3 = d3.select("div[id='XAxis']");
var my_XAxis = gd3.node();
gd3 = d3.select("div[id='YAxis']");
var my_YAxis = gd3.node();
gd3 = d3.select("div[id='XYAxis']");
var my_XYAxis = gd3.node();

var layout = {
    xaxis: {
        range : [0, 1]
    },
    yaxis: {
        range : [0, 1]
    },
    margin: {t: 20},
    hovermode: 'closest',
}

Plotly.newPlot(my_XAxis, [], layout);
Plotly.newPlot(my_YAxis, [], layout);
Plotly.newPlot(my_XYAxis, [], layout);

Answer 1

你的CSS似乎很奇怪。尝试将其更改为：

div.left {
    float: left;
    clear: both;
}
div.right {
    float: right;
    clear: both;
}

如果您将以下块更改为

gd3 = d3.select("div[id='XYAxis']")
  .style({
    width: 0.5 * WIDTH_IN_PERCENT_OF_PARENT + '%',
    height: 1.5 * HEIGHT_IN_PERCENT_OF_PARENT + 'vh',
});

您应该为第三个元素获得所需的大小更改。

使用CSS绘制Plotly Axis位置

1 个答案: