Plotly.js 添加标记将填充添加到 x 轴答案

【问题标题】：Plotly.js Adding markers adds padding to x-axisPlotly.js 添加标记将填充添加到 x 轴
【发布时间】：2018-03-05 03:13:05
【问题描述】：

在向折线图添加标记时，有没有办法防止 Plotly 更改 x 轴上的填充。请参阅下面的两个 sn-ps。唯一的区别是第 24 行，其中 'lines' 更改为 'lines+markers'。

第一个没有标记的 sn-p：

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

<body>

  <div id="myDiv">
  </div>
  <script>
    var layout = {
      xaxis: {
        showticklabels: true,
        tickmode: 'auto',
        nticks: 15,
        tickangle: 45,
        rangemode: 'tozero',
      },
    };

    var trace1 = {
      x: ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5', 'Week 6', 'Week 7', 'Week 8'],
      y: [10, 15, 13, 17, 10, 15, 13, 17],
      type: 'scatter',
      mode: 'lines',
    };

    var data = [trace1];

    Plotly.newPlot('myDiv', data, layout);
  </script>
</body>

第二个带有标记的 sn-p：

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

<body>

  <div id="myDiv">
  </div>
  <script>
    var layout = {
      xaxis: {
        showticklabels: true,
        tickmode: 'auto',
        nticks: 15,
        tickangle: 45,
        rangemode: 'tozero',
      },
    };

    var trace1 = {
      x: ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5', 'Week 6', 'Week 7', 'Week 8'],
      y: [10, 15, 13, 17, 10, 15, 13, 17],
      type: 'scatter',
      mode: 'lines+markers',
    };

    var data = [trace1];

    Plotly.newPlot('myDiv', data, layout);
  </script>
</body>

【问题讨论】：

你能说得更具体点吗？在 chrome (Windows/Mac/Linux) 上，x 轴上的填充是相同的。我什至将两者都保存为图像并覆盖它们——除了顶点处的点之外，两者是相同的。您认为哪个浏览器/操作系统有所不同？你能发布它的屏幕截图吗？
我添加了一个显示差异的屏幕截图。我在 Chrome (Windows) 上。
知道了，我想我有一个不错的答案给你...

标签： javascript d3.js plotly

【解决方案1】：

这有点令人困惑，因为它实际上是关闭了 y 轴。无论如何，这可以通过将yaxis 设置为showgrid: false 然后偏移yaxislayer-above 以重新定位标签来解决。

这可以像我一样在 css 中完成，也可以在 Javascript 中完成。

我可能在这里没有像素相同（设置为 102 像素），但你应该明白了。

<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
  <style>
  .yaxislayer-above {
     transform: translate(102px,100px);
  }
  </style>
</head>

<body>

  <div id="myDiv">
  </div>
  <script>
    var layout = {
      yaxis: {
        showgrid: false,
      },
      xaxis: {
        showticklabels: true,
        tickmode: 'auto',
        nticks: 15,
        tickangle: 45,
        rangemode: 'tozero',
      },
    };

    var trace1 = {
      x: ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5', 'Week 6', 'Week 7', 'Week 8'],
      y: [10, 15, 13, 17, 10, 15, 13, 17],
      type: 'scatter',
      mode: 'lines+markers',
    };

    var data = [trace1];

    Plotly.newPlot('myDiv', data, layout);
  </script>
</body>

【讨论】：

谢谢。绝对是一个很好的答案。但是，它实际上仍然在做同样的事情并改变 x 轴。现在我们只是移动 y 轴，所以它不那么明显。 imgur.com/a/pi49e 在这个玩具示例中，它并没有太大的区别 - 但在我的实际用例中，它更复杂是非常明显的。看到这个：imgur.com/a/fhFuQ
听起来不错。期待看到答案。谢谢！
只是一个碰撞。很想看看你的建议。
@Wessi - 嗯仍然在玩它 - 我的想法有点做作......只要保持问题开放，当我有机会时我会玩它。奇怪的是 为什么 它们的缩放比例不同 - 没有真正的原因，要查看 plotlyjs 源并深入了解它......

【解决方案2】：

我遇到了同样的问题，我找到的解决方案是将autorange 设置为false AND 指定x 轴range。见：https://plot.ly/javascript/reference/#layout-xaxis-range

固定示例：

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

<body>

  <div id="myDiv">
  </div>
  <script>
    var layout = {
      xaxis: {
        showticklabels: true,
        tickmode: 'auto',
        nticks: 15,
        tickangle: 45,
        rangemode: 'tozero',
        range: [0, 7]
      },
    };

    var trace1 = {
      x: ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5', 'Week 6', 'Week 7', 'Week 8'],
      y: [10, 15, 13, 17, 10, 15, 13, 17],
      type: 'scatter',
      mode: 'lines+markers',
    };

    var data = [trace1];

    Plotly.newPlot('myDiv', data, layout);
  </script>
</body>

【讨论】：

请注意，当提供range 时，autorange 会自动设置为False。