Распечатайте образцы изображений по сетевому графику

Question

Я использую Plotly для отображения сетевого графика, и я пытаюсь отобразить образцы изображений, принадлежащих указанным c точкам данных (каждая точка данных представляет собой карту яркости скульптуры 64x64). У меня две проблемы:

1. Я использую координаты точки данных для позиционирования изображения, но они не выровнены. Я пытался использовать xanchor/yanchor, чтобы исправить это, но это не сработало.
2. Хотя я строю 100 изображений, на самом деле видны только некоторые из них. Если я увеличу визуализацию, я смогу увидеть больше из них, но я хочу заставить Plotly показать все из них. Я попытался с layer='above', но не сработало.
3. Было бы замечательно, если бы был способ связать изображение с фактической точкой данных, но я не знаю, как это сделать.

def plot_graph (G, plot_title, набор данных, координаты = нет):

if coordinates == None:
    coordinates = nx.drawing.spring_layout(G, weight=None)

edge_x = []
edge_y = []
for edge in G.edges():
    x0, y0 = coordinates[edge[0]]
    x1, y1 = coordinates[edge[1]]
    edge_x.extend([x0, x1])
    edge_y.extend([y0, y1])

edge_trace = go.Scatter(x=edge_x,
                        y=edge_y,
                        line=dict(width=0.5, color='#888'),
                        hoverinfo='none',
                        mode='lines'
                        )

node_x = []
node_y = []
for node in G.nodes():
    x, y = coordinates[node]
    node_x.append(x)
    node_y.append(y)

colorbar_attrs = dict(thickness=15, title='KNN Density', xanchor='left', titleside='right')
marker_attrs = dict(showscale=True,
                    colorscale='YlGnBu',
                    reversescale=True,
                    color=[], size=10,
                    colorbar=colorbar_attrs,
                    line_width=2)

node_trace = go.Scatter(x=node_x, y=node_y, mode='markers', hoverinfo='text', marker=marker_attrs)

node_adjacencies = []
node_text = []

for node, adjacencies in enumerate(G.adjacency()):
    node_adjacencies.append(len(adjacencies[1]))
    node_text.append('K-Nearest Neighbors: '+str(len(adjacencies[1])))


node_trace.marker.color = node_adjacencies
node_trace.text = node_text
fig = go.Figure(data=[edge_trace, node_trace],
                layout=go.Layout(
                title='<br> {}'.format(plot_title),
                titlefont_size=18,
                showlegend=False,
                hovermode='closest',
                margin=dict(b=20,l=5,r=5,t=40),
                xaxis=dict(showgrid=False, zeroline=False, showticklabels=False),
                yaxis=dict(showgrid=False, zeroline=False, showticklabels=False))
                )

num_images = 100
num_faces = dataset.shape[0]
sample_images = np.random.choice(num_faces, num_images, replace=False)
greys = cm.get_cmap('Greys_r')

for index in sample_images:
    greyscale = np.apply_along_axis(greys, 0, dataset[index]).reshape((64, 64, 4))*255
    greyscale = greyscale.astype(np.uint8)
    im = pilim.fromarray(greyscale)
    fig.add_layout_image(dict(
        source=im,
        x=coordinates[index][0],
        y=coordinates[index][1],
        sizex=0.03,
        sizey=0.03,
        layer='above'
                         ))

return fig

Это то, что я получаю

Answer 1

Первый шаг

Поскольку вы не предоставили полностью воспроизводимый пример, трудно решить вашу проблему напрямую. Но у меня есть предложение, основанное на верхнем примере из plot.ly / python / network-graphs / и использующее изображение benze.png , которое также используется в других графически примеры . Изображение хранится в списке несколько раз, поэтому вы можете легко заменить его ссылками на другие изображения. Я получаю X, Y координаты от fig['data'][1]['x'] и fig['data'][1]['y'], но это также легко можно настроить и для других источников.

График 1:

График 2: Увеличено

Теперь, если я правильно понимаю вашу задачу, этот график соответствует вашим требованиям по всем трем критериям:

1. точки данных выровнены
2. все изображения показывают
3. изображения выровнены напрямую все точки данных

Пожалуйста, не стесняйтесь, дайте мне знать, как это работает для вас!

Код:

import plotly.graph_objects as go
import networkx as nx

G = nx.random_geometric_graph(200, 0.125)

edge_x = []
edge_y = []
for edge in G.edges():
    x0, y0 = G.nodes[edge[0]]['pos']
    x1, y1 = G.nodes[edge[1]]['pos']
    edge_x.append(x0)
    edge_x.append(x1)
    edge_x.append(None)
    edge_y.append(y0)
    edge_y.append(y1)
    edge_y.append(None)

edge_trace = go.Scatter(
    x=edge_x, y=edge_y,
    line=dict(width=0.5, color='#888'),
    hoverinfo='none',
    mode='lines')

node_x = []
node_y = []
for node in G.nodes():
    x, y = G.nodes[node]['pos']
    node_x.append(x)
    node_y.append(y)

node_trace = go.Scatter(
    x=node_x, y=node_y,
    mode='markers',
    hoverinfo='text',
    marker=dict(
        showscale=True,
        colorscale='YlGnBu',
        reversescale=True,
        color=[],
        size=10,
        colorbar=dict(
            thickness=15,
            title='Node Connections',
            xanchor='left',
            titleside='right'
        ),
        line_width=2))

node_adjacencies = []
node_text = []
for node, adjacencies in enumerate(G.adjacency()):
    node_adjacencies.append(len(adjacencies[1]))
    node_text.append('# of connections: '+str(len(adjacencies[1])))

node_trace.marker.color = node_adjacencies
node_trace.text = node_text

fig = go.Figure(data=[edge_trace, node_trace])

# sample images
sample_images=["https://raw.githubusercontent.com/michaelbabyn/plot_data/master/benzene.png"]*len(fig['data'][1]['x'])
xVals = fig['data'][1]['x']
yVals = fig['data'][1]['y']

for i in range(0, len(xVals)):  
    fig.add_layout_image(dict(
        source=sample_images[i],
        x=xVals[i],
        y=yVals[i],
        xref="x",
        yref="y",
        #sizex=0.03,
        #sizey=0.03,
        #layer='above'
        sizex=0.1,
        sizey=0.1,
        #sizing="stretch",
        opacity=0.5,
        layer="below"
    ))

fig.show()