使用mpld3在大叶草/自举折叠中使刻度标签抖动

编程问答 2022-06-06

问题描述

作为序言：我知道使用mpld3存在一些刻度格式问题，但是我相信这是另外一回事。 几乎完美运行！

我正在用大叶草（天赐之物）来创建一个地图，其中标记和GeoJson弹出窗口中包含html内容。其中一些内容包括可折叠的引导按钮，我现在将mpld3内容合并到我的产品中。我注意到一些我不完全了解的行为：

    放在iframe的父div中的

  • mpld3材质加载时没有障碍，甜心！但是...

  • 当我将html图形放到可折叠的按钮中时，展开时，x轴标签的加载几乎与书脊重叠。如果我单击图形上的主页按钮（或使用平移或缩放进行交互），则标签会对齐到正确的位置。

在注意到抖动之前，我通过使用刻度参数开始了故障排除，例如使用ax.tick_params(axis='x',pad=10)和plt.xticks(ticks = [],labels=[my label list])进行修改。当然，这是在我之前发现的：

  1. mpld3存在一些不受支持的刻度格式的已知问题，并且
  2. 当图形与可折叠对象交互或加载到可折叠对象外部时，标签间距正确。

上面的第二个注释使我相信这并不是标签间距问题，而是某种类型的加载/渲染错误，这是我是一个新手。以下是复制面食，重现了我观察到的问题。与图表互动后，您需要刷新页面以重新创建问题。

是否有某种方法可以在可折叠扩展时强制刷新JS内容？关于如何解决我这一生的小刺激，有什么想法吗？

import folium,branca
import matplotlib.pyplot as plt 
import mpld3
import os

fig = plt.figure()
plt.title('Testing!')
plt.xlabel('x labels')
plt.ylabel('y labels')
plt.bar([1,10],[5,9])
html_graph = mpld3.fig_to_html(fig)
html_graph2 = mpld3.fig_to_html(fig)


m = folium.Map(location=[39,-98],zoom_start=5,tiles="Stamen Terrain")

header_content="""
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
"""

html = """
<html>
<body>
<div class="container">

  {}
  <h5>This guy works just fine!</h5>
  <h2 class="btn btn-block" data-toggle="collapse" style="background-color: powderblue;" data-target="#demo" href="#">Click me!</h2>
  <div id="demo" class="collapse">
  {}
  <h5>And this guy requires you to click on the home button (or navigate through the graph) to get tick labels to move to the correct position. What gives?</h5>
  </div>
</div>

</body>
</html>
""".format(html_graph,html_graph2)


iframe = branca.element.IFrame(html=header_content+html,width=600,height=550)
c = folium.Marker([39,popup=folium.Popup(iframe,parse_html=True)).add_to(m)
m.save(os.path.join(r'[target folder]','folium_mpld3.html'))

P.S。我没有花很长时间编写代码，但是由于在这里的人们的帮助，我什至可以提高生产力。预先感谢您花一些时间在此上的人。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

foliumjavascriptmatplotlibmpld3python