1

我可以使用 Plotly 简单地显示我的情节（3D 散点图）。我正在尝试实现点击事件功能。一旦我点击任何一个绘图点，我想改变它的颜色。根据官方 Plotly 文档，这并不难：Plotly - 点击事件

我只能看到我点击的点被点击（控制台日志）。有没有人知道为什么我不能实时改变颜色？

提前致谢。这是我的片段：

模板：

{% extends 'base.html' %}

{% load static %}

{% block css %}
    <script src="{% static 'js/plotly-latest.min.js' %}"></script>
{% endblock %}

{% block content %}
    <div id="single_plot">
        {{ plot_as_div|safe }}
    </div>
{% endblock %}

{% block js %}
    <script src="{% static 'js/plot_select_markers.js' %}"></script>
{% endblock %}

plot_select_markers.js

$(document).ready(function () {
    var plot_div_id = $('#single_plot').children().attr('id');

    var plotly_scatter_div = document.getElementById(plot_div_id);

    var color_select = '#7b3294';

    plotly_scatter_div.on('plotly_click', function (data) {
        var pn = '', tn = '', colors = [];

        for (var i = 0; i < data.points.length; i++) {
            pn = data.points[i].pointNumber;
            tn = data.points[i].curveNumber;

            colors = data.points[i].data.marker.color;
        }

        colors[pn] = color_select;

        var update = {
            'marker': {
                color: colors,
                size: 7
            }
        };

        Plotly.restyle(plotly_scatter_div, update, [tn]);
    });
4

1 回答 1

0

我不确定这是否是Django代码问题，但plotly js code我已经为这个问题创建了一个工作示例。

plotly_click注意： 的事件有问题3D-charts。这使它进入了recursive loop，这个问题已经在下面提出Github Ticket，我遵循了他们的临时解决方案并且能够使代码工作。

关于更新对象。

var update = {
    ["marker.color[" + pn + "]"]: color_select,
    ["marker.size[" + pn + "]"]: 7
};

您可以将键定义为marker.size[0]指示第一个需要更新为特定值。由于我们以编程方式设置对象的键，因此我将对象属性括在方括号 ( ["marker.color[" + pn + "]"]) 中。

另请注意，您不能将属性作为单个属性size，color因为您想更新单个点的大小/颜色。所以我使用了这个简单的模型函数setValue，它会返回一个数组，默认值是一个长度为z properties elements.

function setValue(rows, key, color) {
  return rows.map(function(row) {
    return color;
  });
}

请尝试以下代码，如果您的问题得到解决，请告诉我！！

Plotly.d3.csv(
  "https://raw.githubusercontent.com/plotly/datasets/master/3d-scatter.csv",
  function(err, rows) {
    function unpack(rows, key) {
      return rows.map(function(row) {
        return row[key];
      });
    }

    function setValue(rows, key, color) {
      return rows.map(function(row) {
        return color;
      });
    }
    var trace1 = {
      x: unpack(rows, "x1"),
      y: unpack(rows, "y1"),
      z: unpack(rows, "z1"),
      mode: "markers",
      marker: {
        color: setValue(rows, "z1", "rgb(127, 230, 127)"),
        size: setValue(rows, "z1", 20),
        line: {
          color: "rgba(217, 217, 217, 0.14)",
          width: 0.5
        },
        opacity: 0.8
      },
      type: "scatter3d"
    };
    var trace2 = {
      x: unpack(rows, "x2"),
      y: unpack(rows, "y2"),
      z: unpack(rows, "z2"),
      id: unpack(rows, "z2"),
      mode: "markers",
      marker: {
        color: setValue(rows, "z1", "rgb(127, 127, 127)"),
        size: setValue(rows, "z1", 20),
        symbol: "circle",
        line: {
          color: "rgb(204, 204, 204)",
          width: 1
        },
        opacity: 0.9
      },
      type: "scatter3d"
    };
    var data = [trace1, trace2];
    var layout = {
      margin: {
        l: 0,
        r: 0,
        b: 0,
        t: 0
      }
    };
    Plotly.newPlot("myDiv", data, layout);
    var plotly_scatter_div = document.getElementById("myDiv");

    var color_select = "#7b3294";

    plotly_scatter_div.on("plotly_click", function(data) {
      var pn = "",
        tn = "",
        colors = [];

      for (var i = 0; i < data.points.length; i++) {
        pn = data.points[i].pointNumber;
        tn = data.points[i].curveNumber;
        colors = data.points[i].data.marker.color;
      }
      colors[pn] = color_select;

      var update = {
        ["marker.color[" + pn + "]"]: color_select,
        ["marker.size[" + pn + "]"]: 7
      };
      setTimeout(function(x) {
        Plotly.restyle("myDiv", update, tn);
      }, 50);

    });
  }
);
<head>
  <!-- Plotly.js -->
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>
  <!-- Plotly chart will be drawn inside this DIV -->
  <div id="myDiv" style="width:100%;height:100%"></div>
  <script>
    /* JAVASCRIPT CODE GOES HERE */
  </script>
</body>

于 2018-06-27T08:09:56.127 回答