时间戳

首页 > 解决方案 > 如何在plotly.js中的不同modeBarButtons之间切换

javascript - 如何在plotly.js中的不同modeBarButtons之间切换

问题描述

我为我的 Plotly.js modeBar 创建了 2 个自定义按钮（图标）：播放和暂停。

我想在这个图标之间切换/切换，我可以做到，但是我对结果不满意，想知道是否有更好的方法而无需Plotly再次调用。

const paused = false

// Custom icons
const play = {
  name: 'Pause',
  icon: {
    width: 500,
    height: 500,
    path: 'M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z',
  },
  click: () => Plotly.plot(chart, [], {}, { modeBarButtonsToAdd: [pause] })
}

const pause = {
  name: 'Play',
  icon: {
    width: 500,
    height: 500,
    path: 'M144 479H48c-26.5 0-48-21.5-48-48V79c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48v352c0 26.5-21.5 48-48 48zm304-48V79c0-26.5-21.5-48-48-48h-96c-26.5 0-48 21.5-48 48v352c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48z',
  },
  click: () => Plotly.plot(chart, [], {}, { modeBarButtonsToAdd: [play] })
}

// Chart
const plot = Plotly.plot(chart, [{
  x: [1, 2, 3, 4],
  y: [10, 15, 13, 17],
  type: 'scatter'
}], {}, { 
  displaylogo: false,
  displayModeBar: true,
  modeBarButtonsToAdd: [paused ? pause : play]  
})
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="chart"></div>

运行上面的代码片段并单击最后一个图标。

此外，我使用.active该类实现了另一个版本并使用 CSS 设置图标，但再次想弄清楚Plotly.js专家如何解决这个问题。

标签： javascripthtmlcssplotlyplotly.js

解决方案

Plotly 有一些它应该记录的特性，它在内部使用这些特性使 modeBarButtons 更容易从代码中管理。您可以利用这些功能来简化此操作。我也在 Plotly 论坛上对此进行了介绍。

有一个秘密的 modeBarButton attr，您可以使用它轻松地定位从 CSS 和 Javascript 生成的按钮。从那里你可以很容易地交换你的图标。

https://jsfiddle.net/b9chris/yd5pxb47/

首先，您需要一个自定义按钮。您可以通过 modeBarAddButtons 添加按钮，或者手动插入并直接接管按钮的顺序。在此示例中，我使用手动方法，因为它是控制按钮顺序的唯一方法 - 您通常想要这样做：

modeBarButtons: [[
    {
        name: 'download',
        attr: 'download',
        title: 'Download as Image',
        icon: {
            width: 10, height: 10,
            path: 'M5,1 L5,8 L2,5 L5,8 L8,5 M2,9 L8,9'
        },
        click: onClickDownloadImage
    }
    ],['zoom2d', 'pan2d', 'select2d', 'lasso2d', 'zoomIn2d', 'zoomOut2d'
]]

此属性位于您将作为第四个参数传递给 plotlynewPlot()函数的 plotlyConfig 对象上。

在这种情况下，它是一个下载按钮，但您可以放入播放按钮或其他任何东西。

因为已经设置了 attr 属性，所以模式栏按钮将呈现如下：

<a data-attr=download ...><svg class=icon ...><path d="(icon path)"/></svg></a>

这意味着您可以使用 JS 中的 CSS 和选择器来定位它，例如：

#graph div.modebar a[data-attr=download]

在我这个愚蠢的例子中，下载后的图标变成了一个复选标记，就像这样：

function onClickDownloadImage(gd) {
  . . .
  
  var buttonPath = $('#graph div.modebar a[data-attr=download] svg path');
  buttonPath.attr('d', 'M1,5 L5,9 L9,1');
};

所以它只是从按钮 onclick 中获取路径，并交换一些新的路径数据。但是您可以将路径数据保存在库中并交换它们，或者您想要接近它。

推荐阅读