Выделение строк на графике случайного блуждания mpld3

У меня есть таблица, состоящая из столбцов id , value и соответствующего [графика случайного блуждания] [1] с использованием mpld3. Я хотел бы предварительно выделить определенную строку из линейного графика вместо наведения курсора мыши.

Фрагмент кода из mpld3: [1]: https://mpld3.github.io/examples/random_walk.html

import jinja2
import json
import numpy as np
import matplotlib.pyplot as plt
import mpld3
from mpld3 import plugins, utils

class HighlightLines(plugins.PluginBase):
    """A plugin to highlight lines on hover"""
    JAVASCRIPT = """
    mpld3.register_plugin("linehighlight", LineHighlightPlugin);
    LineHighlightPlugin.prototype = Object.create(mpld3.Plugin.prototype);
    LineHighlightPlugin.prototype.constructor = LineHighlightPlugin;
    LineHighlightPlugin.prototype.requiredProps = ["line_ids"];
    LineHighlightPlugin.prototype.defaultProps = {alpha_bg:0.3, alpha_fg:1.0}
    function LineHighlightPlugin(fig, props){
        mpld3.Plugin.call(this, fig, props);
    };

    LineHighlightPlugin.prototype.draw = function(){
      for(var i=0; i<this.props.line_ids.length; i++){
         var obj = mpld3.get_element(this.props.line_ids[i], this.fig),
             alpha_fg = this.props.alpha_fg;
             alpha_bg = this.props.alpha_bg;
         obj.elements()
             .on("mouseover", function(d, i){
                            d3.select(this).transition().duration(50)
                              .style("stroke-opacity", alpha_fg); })
             .on("mouseout", function(d, i){
                            d3.select(this).transition().duration(200)
                              .style("stroke-opacity", alpha_bg); });
      }
    };
    """

    def __init__(self, lines):
        self.lines = lines
        self.dict_ = {"type": "linehighlight",
                      "line_ids": [utils.get_id(line) for line in lines],
                      "alpha_bg": lines[0].get_alpha(),
                      "alpha_fg": 1.0}
    N_paths = 50
    N_steps = 100

    x = np.linspace(0, 10, 100)
    y = 0.1 * (np.random.random((N_paths, N_steps)) - 0.5)
    y = y.cumsum(1)

    fig, ax = plt.subplots(subplot_kw={'xticks': [], 'yticks': []})
    lines = ax.plot(x, y.T, color='blue', lw=4, alpha=0.1)
    plugins.connect(fig, HighlightLines(lines))

    mpld3.show()

Код после включения предложения @codemax

import jinja2
import json
import numpy as np
import matplotlib.pyplot as plt
import mpld3
from mpld3 import plugins, utils

class HighlightLines(plugins.PluginBase):
    """A plugin to highlight lines on hover"""
    JAVASCRIPT = """
    mpld3.register_plugin("linehighlight", LineHighlightPlugin);
    LineHighlightPlugin.prototype = Object.create(mpld3.Plugin.prototype);
    LineHighlightPlugin.prototype.constructor = LineHighlightPlugin;
    LineHighlightPlugin.prototype.requiredProps = ["line_ids"];
    LineHighlightPlugin.prototype.defaultProps = {alpha_bg:0.3, alpha_fg:1.0}
    function LineHighlightPlugin(fig, props){
        mpld3.Plugin.call(this, fig, props);
    };

    LineHighlightPlugin.prototype.draw = function(){
      for(var i=0; i<this.props.line_ids.length; i++){
         const list = [0, 4, 6];
         if (list.includes(i)) {
           obj.elements().style("stroke-opacity", alpha_fg);
         }
       }
    };
    """

    def __init__(self, lines):
        self.lines = lines
        self.dict_ = {"type": "linehighlight",
                      "line_ids": [utils.get_id(line) for line in lines],
                      "alpha_bg": lines[0].get_alpha(),
                      "alpha_fg": 1.0}
    N_paths = 50
    N_steps = 100

    x = np.linspace(0, 10, 100)
    y = 0.1 * (np.random.random((N_paths, N_steps)) - 0.5)
    y = y.cumsum(1)

    fig, ax = plt.subplots(subplot_kw={'xticks': [], 'yticks': []})
    lines = ax.plot(x, y.T, color='blue', lw=4, alpha=0.1)
    plugins.connect(fig, HighlightLines(lines))

    mpld3.show()

person Ravi Kiran Gururaja    schedule 08.09.2020    source источник
comment
Вам это кажется javaScript или D3.js?   -  person codemax    schedule 09.09.2020
comment
Основная часть выделения выполняется с использованием javascript через d3.js. Пожалуйста, взгляните на фрагмент кода (JAVASCRIPT) внутри класса HighlightLines.   -  person Ravi Kiran Gururaja    schedule 09.09.2020
comment
Я понимаю. Итак, что вы имеете в виду, когда хотите предварительно выделить строку? Вы хотите, чтобы одна строка или несколько строк выделялись по умолчанию?   -  person codemax    schedule 09.09.2020
comment
Спасибо. Я хочу предварительно выделить одну строку по умолчанию.   -  person Ravi Kiran Gururaja    schedule 09.09.2020


Ответы (1)


Вы можете выбрать отдельные строки и выделить их, используя этот подход.

LineHighlightPlugin.prototype.draw = function(){
  for(var i=0; i<this.props.line_ids.length; i++){
      var obj = mpld3.get_element(this.props.line_ids[i], this.fig),
          alpha_fg = this.props.alpha_fg;
          alpha_bg = this.props.alpha_bg;
      // Depending on which line you wish to highlight, 
      // you can change 1 to any index 
      // add the following 3 lines to your code
      if (i === 1) {
        obj.elements().style("stroke-opacity", alpha_fg);
      }

      obj.elements()
          .on("mouseover", function(d, i){
                        d3.select(this).transition().duration(50)
                          .style("stroke-opacity", alpha_fg); })
          .on("mouseout", function(d, i){
                        d3.select(this).transition().duration(200)
                          .style("stroke-opacity", alpha_bg); });
  }
};

Если вы хотите выделить несколько строк, вы можете использовать этот подход.

LineHighlightPlugin.prototype.draw = function(){
  for(var i=0; i<this.props.line_ids.length; i++){
      var obj = mpld3.get_element(this.props.line_ids[i], this.fig),
          alpha_fg = this.props.alpha_fg;
          alpha_bg = this.props.alpha_bg;
     // add the following 4 lines to your code
     const list = [0, 4, 6]; // these numbers are random. Use your own numbers
     if (list.includes(i)) {
       obj.elements().style("stroke-opacity", alpha_fg);
     }

      obj.elements()
          .on("mouseover", function(d, i){
                        d3.select(this).transition().duration(50)
                          .style("stroke-opacity", alpha_fg); })
          .on("mouseout", function(d, i){
                        d3.select(this).transition().duration(200)
                          .style("stroke-opacity", alpha_bg); });
  }
};
person codemax    schedule 09.09.2020
comment
Пробовал добавить изменение. Однако, похоже, он не отображается так, как ожидалось. - person Ravi Kiran Gururaja; 09.09.2020
comment
Я добавил новый код в вопрос. Пожалуйста, взгляните на это. - person Ravi Kiran Gururaja; 09.09.2020
comment
Эм. Я дал вам ответ, и это работает. Вам необходимо добавить новые строки в базу кода и НЕ удалить существующие строки кода. - person codemax; 09.09.2020
comment
Да, теперь я вижу пре-хайлайт. - person Ravi Kiran Gururaja; 09.09.2020
comment
@RaviKiran Отлично! - person codemax; 09.09.2020