Javascript 在随机游走图mpld3上高亮显示线
我有一个由id、值列和使用mpld3的相应的[random walk plot][1]组成的表。我想预先突出显示线条图中的特定线条,而不是鼠标悬停 mpld3中的代码段:[1]: 合并@codemax建议后的代码Javascript 在随机游走图mpld3上高亮显示线,javascript,d3.js,mpld3,Javascript,D3.js,Mpld3,我有一个由id、值列和使用mpld3的相应的[random walk plot][1]组成的表。我想预先突出显示线条图中的特定线条,而不是鼠标悬停 mpld3中的代码段:[1]: 合并@codemax建议后的代码 import jinja2 import json import numpy as np import matplotlib.pyplot as plt import mpld3 from mpld3 import plugins, utils class HighlightLine
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()
您可以使用此方法选择单独的线并高亮显示它
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); });
}
};
如果希望高亮显示多行,可以使用此方法
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); });
}
};
这看起来像javaScript还是D3.js?核心突出显示部分是通过D3.js使用javaScript完成的。请看一下HighlightLines类中的JavaScript代码片段。我明白了。那么,您希望预先突出显示一行是什么意思?您希望在默认情况下突出显示一行或多行?谢谢。我希望在默认情况下预高亮显示一行。已尝试添加更改。但是,它似乎没有按预期呈现。我已经在问题中添加了新代码。请调查一下。我给了你答案,它起作用了。您需要将新行添加到代码库中,而不要删除现有的代码行。是的,我现在可以看到预高亮显示。@RaviKiran很棒!