Javascript 绘图仪响应宽度，固定高度

我曾尝试制作一个适合滚动父div的绘图图表：

   function resP(id){
    var d3 = Plotly.d3;

    var parent_width = $("#"+id).parent().width()
    var gd3 = d3.select(`div[id=${id}]`)
        .style({
            width: parent_width - 10,
            //'margin-right': (100 - WIDTH_IN_PERCENT_OF_PARENT) / 2 + 'vh',
            //'margin-top': (100 - HEIGHT_IN_PERCENT_OF_PARENT) / 2 + 'vh'
        });
    return gd3.node();
   }

   window.addEventListener('resize', function(){
    Plotly.Plots.resize( resP('p1') );
   })

数据={
名称：{0:'name1'，1:'name2'，2:'name3'，
3:‘n4’、4:‘ewf’、5:‘dgag’、6:‘faf’、7:‘dfss’、，
8:'345'，9:'9'，10:'23435'，11:'2e345'，12:'3345'，13:'a345'，
14:'34g5'，15:'3f45'}，
计数：{0:1023，1:2345，3:3875，4:234，5:3456，6:84，7:7763，
8:345,9:2345,10:2345, 11:2345,12:345, 13:345, 14:345, 
15:345},
索引：{0:35,1:200,2:160,3:24,4:234,5:356,6:84,7:73，
8:345,9:2345,10:2345, 11:2345,12:345, 13:345, 14:345, 
15:345}
}
$（'#p1'）.html（“”）；
console.log（数据）
Plotly.newPlot（'p1'，
[{
类型：'bar'，
x：对象值（数据计数），
y：对象.值（数据.名称），
基数：0，
方向：“h”
},{
类型：'bar'，
x:Object.values（data.Index）.map（函数（e）{
e=e-100
返回e
}),
y：对象.值（数据.名称），
基数：100，
方向：“h”，
xaxis:'x2'，
yaxis：“y”
},],
{
高度：10*2.3*对象。键（数据。索引）。长度，
亚克斯：{
是的，
角度：35
},
网格：{
行：1，
栏目：2，
子批次：[[xy'，x2y']]
}
},
{
回答：对
})

.col.tpcs{
溢出y：滚动；
溢出x：隐藏；
显示：内联块；
高度：400px；
}

---

plotly似乎还没有这个功能。为了解决这个问题，我必须做的是制作一个完全响应的绘图，并将其包装成一个额外的嵌套div，如下所示：

    <div class="row loading pt-5 mt-md-3 mb-5">
        <div class="col tpcs" id='p1wrap'>
            <div class="ph" id=p1></div>
        </div>
    </div>

---

您的代码段不工作。请调整代码