Джанго / Plotly - Нажмите события с JS

Question

Я могу просто отобразить свой график (3D-разброс) с помощью Plotly. Я пытаюсь реализовать функцию события клика. После того, как я нажму на любую точку графика, я хочу изменить ее цвет. Согласно официальной документации 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]);
    });

Answer 1

Я не уверен, что это проблема с кодом 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>