get values from list in dict?

dic

data = {"28-11-2023": {"1": ["eifrig", "2"]: {"infinitiv": "eager"}}}

code:

dater = "28-11-2023"
data[dater]["1"]["eifrig", "2"] <- Bluesrceen

Frage:

Wie bekomm ich vom listen objekt das value

29.11.2023, 05:30

Ich arbeite mit Json

1 Antwort

Vom Beitragsersteller als hilfreich ausgezeichnet

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Programmiersprache, Python, Python 3

29.11.2023, 05:29

Dein Dictionary ist invalid.

Eine Liste kann nicht als Key verwendet werden. Nutze einen String oder schreibe die Liste in ein Tupel um.
Das Wertepaar Tupel/String - {"infinitiv": "eager"} braucht eine Gruppierung in geschweiften Klammern.

data = {
  "28-11-2023": {
    "1": {
      ("eifrig", "2"): {
        "infinitiv": "eager"
      }
    }
  }
}
entry = data["28-11-2023"]["1"][("eifrig", "2")]
print(entry["infinitiv"]) # eager

ware37

Beitragsersteller

29.11.2023, 05:39

entry = data["28-11-2023"]["1"][("eifrig", "2")]
TypeError: string indices must be integers

regex9

29.11.2023, 05:40

@ware37

https://ideone.com/jGTi5l

ware37

Beitragsersteller

29.11.2023, 05:31

Ich arbeite mit Json, da gibts doch keine tupel, nur listen?

regex9

29.11.2023, 05:38

@ware37

Das ist ein dict, kein JSON-Objekt.

Würde es sich um einen JSON-String handeln (den du für die Bearbeitung in Python auf ein dict o.ä. mappen müsstest), wäre dessen Struktur invalid, da JSON nur Strings als Keys erlaubt.

ware37

Beitragsersteller

29.11.2023, 05:40

@regex9

A, ja danke

ware37

Beitragsersteller

01.12.2023, 03:45

@regex9

Konnen Sie mir Zeigen wie ich den Array mappen musste?

Ähnliche Beiträge

Json in Liste umwandeln C#?

Hey leute

ich versuche die Json Datei auf Bild 1 mit der Methode von Bild 2 zu deserialisieren damit ich eine Liste von Büchern habe, die ich dann auf der Konsole ausgebe.

Der output ist aber wie auf Bild 3 anstatt

11 - Hello - 11

12 - World - 12

Weiß jemand woran das liegt?

...zum Beitrag

Python: JSON-File in Liste konvertieren?

Ich habe folgendes JSON-File:

{
"names":["Alex", "Tom"],
"ID":{
	"1":"13",
    "15":"7"
}
}

Und in Python soll es dann wiefolgt aussegen:

def json_to_list(file):
  # Code...

data = json_to_list('data.json')
print(data)

# Output: [["Alex", "Tom"], ["1", "15"], ["13", "7"]]

...zum Beitrag

javascript api probleme?

Hallo,

guckt euch mal meinen Code an.

JAVASCRIPT:

// INPUT
const login = document.getElementById("loginInput");
const password = document.getElementById("passwordInput");
const button = document.getElementById("sendButton");


// FETCH
const url = "https://crudcrud.com/api/4b3acc467d8c47d8a608bb9820171935/todos"



const dataRender = (array) => {
  if (array === undefined) {
    console.log("Loading results...");
  } else {
    let dataList = array.map((item) => {
      return `
      <div class="users">
        <p>${item.login}</p>
        <button onclick="deleteRequest(${item.id})">Delete</button>
        </div>
        `;
    });
    const getHtml = document.getElementById("userTable");
    getHtml.innerHTML = dataList.join("");
  }
};


const fetchData = async () => {
  try {
    const response = await fetch(url);
    const data = await response.json();
    dataRender(data);
  } catch (error) {
    console.error(error);
  }
};



fetchData();


const postRequest = async () => {
  const data = {
    login: login.value,
    password: password.value,
    isLogin: false,
  };


  try {
    const response = await fetch(url, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    });


    const results = await response.json();
    console.log(results.message);
  } catch (error) {
    console.error(error);
  }


};


button.addEventListener("click", postRequest);


const deleteRequest = async (id) => {
  try {
    const response = await fetch(`${url}/${id}`, {
      method: "DELETE",
      headers: {
        "Content-Type": "application/json",
      }
    })
    const results = await response.json()
    console.log(results.message);
  }
  catch (error) {
    console.error(error);
  }
}

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CRUD</title>
  <script  defer src="./script.js"></script>
</head>
<body>
  <form>
    <input id="loginInput" type="text" placeholder="Login">    
    <input id="passwordInput" type="password" placeholder="Password">    
    <button onclick="" id="sendButton">Send</button>


    <div id="userTable">
      
    </div>
  </form>
</body>
</html>

Mein Ziel:

Wenn ihr auf das button "Send" drückt, dann erscheint ja der value von dem input "login" auf HTML (innerHTML heisst das glaube ich). Und zusammen mit dem value erscheint auch ein anderer Button namens "Delete". Mein Ziel ist es, dass wenn ich auf "Delete" drücke, dann sollte das item aus Backend-Server und aus HTML gelöscht werden. Aber das klappt bei mir die ganze Zeit nicht. Einfacher ist es wenn ihr meinen Code einfügt und selber mal den Code testet, dann werdet ihr verstehen, was ich machen will.

Bitte helft mir! Ich sitze schon wirklich lange dranrum und ohne Erfolg!

Dankeschön im Voraus!

MfG

MrOsmo

...zum Beitrag

JSON Ausgabe in Datenbank übertragen?

Hallo, ich habe folgendes Anliegen:

Ich bekomme bestimmte Messwerte im JSON-Format über meinen Webserver ausgegeben (siehe Link: https://ibb.co/NrJHnR5). Aus der Kategorie "measures" möchte ich beispielsweise die Werte "value" und "unit" in meine Datenbank (HeidiSQL) übertragen und anzeigen lassen.

Meine Datenbank sieht folgendermaßen aus: https://ibb.co/zFh0GjM

Mein Quellcode:

$connect = new mysqli("db", "root", "example", "mydb"); //Connect PHP to MySQL Database
$query = '';
$table_data = '';
if (!$connect){
        echo "Fail: ", mysqli_connect_error();
    }else{
        echo"Verbindung steht!";
    }
$data = file_get_contents('https://f30d57b2dh91.ngrok.io/weight.php'); 
foreach ($data as $row) { //Extract the Array Values by using Foreach Loop
    $query .= "INSERT INTO User(value, unit) VALUES ('" . $row["value"] . "', '" . $row["unit"] . "'); "; // Make Multiple Insert Query
    $table_data .= '
            <tr>
       <td>' . $row["value"] . '</td>
       <td>' . $row["unit"] . '</td>
    
      </tr>
           '; //Data for display on Web page
}
if (mysqli_multi_query($connect, $query)) { //Run Mutliple Insert Query
    echo '<h3>Imported JSON Data</h3><br />';
}

Die Verbindung zur Datenbank habe ich bereits hergestellt und erfolgreich getestet (siehe nächster Link). Ich kriege jedoch eine Fehlermeldung bei dem "foreach" Befehl ausgegeben (siehe Link: https://ibb.co/NrdJFyz).

Hat jemand eine Idee woran das liegen könnte?

Vielen Dank!

...zum Beitrag

Kennt sich einer mit Programmieren aus?

Hey. Ich wollte mal Fragen ob man bei Anton.app (keine werbung) sich auch trophäen mit Scrips geben kann wie Coins oder Sterne (Sinnlose Punkte).Code für die Sterne (Punkte):

 score = 69420,
sourceId = localStorage.getItem('sourceId').split('"').join(''),
deviceLogId = localStorage.getItem('deviceLogId').split('"').join(''),
users = JSON.parse(localStorage.getItem('users'));
users.forEach(users__value => {
fetch('https://logger-lb-5.anton.app/events', {
method: 'POST',
'headers': { 'Content-Type': 'application/json' },
body: JSON.stringify({
"events":[{"event":"finishLevel","score":score,"src":sourceId,"created":(new Date()).toISOString()}],
"log":users__value.l,
"credentials":{"authToken":users__value.t,"deviceLogId":deviceLogId}
}),
}).then(v=>v).catch(v=>v).then(data => { window.location.reload(); });
});

Für Coins:

coins = 42,
sourceId = localStorage.getItem('sourceId').split('"').join(''),
deviceLogId = localStorage.getItem('deviceLogId').split('"').join(''),
users = JSON.parse(localStorage.getItem('users'));
users.forEach(users__value => {
  fetch('https://logger-lb-5.anton.app/events', {
    method: 'POST',
    'headers': { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      "events":[{"event":"adjustCoins","value":coins,"src":sourceId,"created":(new Date()).toISOString()}],
      "log":users__value.l,
      "credentials":{"authToken":users__value.t,"deviceLogId":deviceLogId}
    }),
  }).then(v=>v).catch(v=>v).then(data => { window.location.reload(); });
});

Kann man sich Trophäen geben oder ist es nicht möglich?
Da ich bis jetzt nur die Codes gefunden habe und dazu änderungen (mit Halbwissen) nicht geklappt hat.

...zum Beitrag

Ubuntu: Wie mache ich das?

Ich nutze Ubuntu seit einer Woche(keine Programmierkenntnisse)
Ich möchte mit Python ein Programm entwickeln, das mir das leben etwas erleichtert. Ich möchte gerne als erstes meinen Yubikey als Passwortersatz auf meinem Computer installieren. Das Problem ist das ich ja um Änderungen am system vornehmen möchte mich im terminal befinden muss. Wie kann ich trotzdem eine GUI programmieren die mich durch den installationsprozess führt? Es muss doch möglich sein das man ein Programm entwickeln kann das eine GUI hat und trotzdem Zugriff auf das system hat oder nicht?

Zum Beispiel kann man einstellen ob der Yubikey als Passwortersatz oder als zweiter Faktor dienen soll. Das will ich halt wie bei einer .exe Datei schön nach einander in einem installationsguide haben. Ich habe das zu einem gewissen grad auch geschafft und zwar mit einem shellskript uund zenity. Aber sobald es ums eingemachte geht funktioniert es nicht mehr. Und zwar sobald ich den Pin für den Yubikey eingeben soll schlließt sich das Zenityfenster und ich bin im Terminal wo ich dann den Pin dort eingeben soll. Das Passwort vorher das hat funktioniert aber beim Pin eben nicht mehr. Dann kam ich auf die Idee ok machste das eben in Python. Python bietet aber nicht die zugriffsrechte wie ein shellskript. Was nun? Ich möchte auch andere Programme dann in den Installer einfügen so dass ich im prinzip sowas habe wie bei der Einrichtung des Systems am anfang wo man schritt für schritt das system konfiguriert.

Hier ist die Anleitung zu der ich das Programm schreiben möchte: https://wiki.ubuntuusers.de/Howto/Yubikey_anstelle_von_Passw%C3%B6rtern_verwenden/

...zum Beitrag

json Daten in JavaScript auslesen und an html Elemente weiterleiten?

Hi,

mehr schlecht als recht arbeite ich mich gerade durch json und habe tatsächlich mittlerweile herausfunden, dass man zum Laden einer json-Datei ohne jQuery folgenden Ansatz zu brauchen scheint:

function loadJSON(callback) {var xobj = new XMLHttpRequest();
xobj.overrideMimeType("application/json");
xobj.open('GET', 'data.json', true); // Replace 'my_data' with the path to your file
xobj.onreadystatechange = function () {
      if (xobj.readyState == 4 && xobj.status == "200") {
        // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
        callback(xobj.responseText);
      }
};
xobj.send(null);  
}

Wie ich damit dann allerdings Objekte und values auslese und weiterleite, ist mir schleierhaft.

Hier ist erst einmal der json Code

{"employees":
    [
        {
            "firstName": "John", 
            "lastName": "Doe"
        },
        {
            "firstName":"Anna", 
            "lastName":"Smith"
        },
        {
            "firstName":"Peter", 
            "lastName":"Jones"
        }
    ]
}

Meine Idee war ja etwas wie document.getElementbyID oder halt byClassName, um den Content im DOM zu verteilen. Aber irgendwas scheint mir zu fehlen.

Pseudocode mäßig wäre halt sowas schön: getElementbyID('title').data(firstName[0]) Irgendwie so halt ...

Was ich bisher gefunden habe, waren nur Kurzeinleitungen, wie ich den Code in der Konsole ausspucke, js Arrays erstelle (warum auch immer die Leute das in einem json Tutorial als Lösung anbieten) oder html Elemente in JavaScript mit dem json Inhalt erstelle. Wie gesagt, würde ich jedoch gerne den json Inhalt an meine bereits existierenden html Elemente weitergeben.

ps. Wenn ihr dazu eine jade-Lösung habt, wäre das natürlich noch um so prickelnder.

...zum Beitrag

Warum will er in meinem Python code entry und entry nicht vergleichen?

import json
from typing import List, Any


def bubbleSort(result):
    n = len(result)

dicts = {}
with open('Schachnovelle.txt', 'r') as f:
   for line in f:
       for word in line.split():
          if word in dicts:
             dicts[word] += 1
          else:
             dicts[word] = 1

x = dicts.values()
#print(x)


class entry:
  word: str
  amount: int


sorted_values = []
for name in dicts:
    item = entry()
    item.word = name
    item.amount = dicts[name]
    sorted_values.append(item)

temp = 0
trade = True
while trade:
    trade = False
    for n in range(len(sorted_values)-1):
        if sorted_values[n] > sorted_values[n+1]:
            temp = sorted_values[n]
            sorted_values[n] = sorted_values[n+1]
            sorted_values[n+1] = temp
            trade = True


print(sorted_values)

...zum Beitrag

Python wie löse 'NoneType' object is not subscriptable?

Hallo!

Ich schreibe ein kleines Pythonprogramm, das als Web Crawler fungieren soll.Leider erhalte ich in Zeile 36 ein Fehler:

  brand = make_rating_sp[0].img["title"].title()
TypeError: 'NoneType' object is not subscriptable

Leider, finde ich keine Lösung. Wie könnte ich diesen Fehler lösen? Danke im Voraus!

make_rating_sp[0].img is None.

from bs4 import BeautifulSoup as soup  # HTML data structure
from urllib.request import urlopen as uReq  # Web client

# URl to web scrap from.
# in this example we web scrap graphics cards from Newegg.com
page_url = "http://www.newegg.com/Product/ProductList.aspx?Submit=ENE&N=-1&IsNodeId=1&Description=GTX&bop=And&Page=1&PageSize=36&order=BESTMATCH"

# opens the connection and downloads html page from url
uClient = uReq(page_url)

# parses html into a soup data structure to traverse html
# as if it were a json data type.
page_soup = soup(uClient.read(), "html.parser")
uClient.close()

# finds each product from the store page
containers = page_soup.findAll("div", {"class": "item-container"})

# name the output file to write to local disk
out_filename = "graphics_cards.csv"
# header of csv file to be written
headers = "brand,product_name,shipping \n"

# opens file, and writes headers
f = open(out_filename, "w")
f.write(headers)

# loops over each product and grabs attributes about
# each product
for container in containers:
    # Finds all link tags "a" from within the first div.
    make_rating_sp = container.div.select("a")

    # Grabs the title from the image title attribute
    # Then does proper casing using .title()
    brand = make_rating_sp[0].img["title"].title()

    # Grabs the text within the second "(a)" tag from within
    # the list of queries.
    product_name = container.div.select("a")[2].text

    # Grabs the product shipping information by searching
    # all lists with the class "price-ship".
    # Then cleans the text of white space with strip()
    # Cleans the strip of "Shipping $" if it exists to just get number
    shipping = container.findAll("li", {"class": "price-ship"})[0].text.strip().replace("$", "").replace(" Shipping", "")

    # prints the dataset to console
    print("brand: " + brand + "\n")
    print("product_name: " + product_name + "\n")
    print("shipping: " + shipping + "\n")

    # writes the dataset to file
    f.write(brand + ", " + product_name.replace(",", "|") + ", " + shipping + "\n")

f.close()  # Close the file

...zum Beitrag

Spotify API Get Methode Blocked?

Moin, hab mal ne Frage, da ich es einfach nicht hin bekomme. Ich habe vor sowas wie eine Musikwunsch Seite für ein Schul Projekt zu coden. Dafür will ich die Spotify API nutzen, damit man über diese Songs suchen kann. Es kommt aber immer in der Netzwerkanalyse der Fehler NS_BINDING_ABORTED, obwohl mein Access Token korrekt ist. Hier ist meine script.js

const API_ENDPOINT = "https://api.spotify.com/v1/search";
const ACCESS_TOKEN = "your_access_token";

function searchSong() {
    let songName = document.getElementById("song-name").value;

    fetch(`${API_ENDPOINT}?q=${songName}&type=track`, {
        headers: {
            "Authorization": `Bearer ${ACCESS_TOKEN}`
        }
    })
    .then(response => response.json())
    .then(data => {
        let songResults = data.tracks.items;

        if (songResults.length > 0) {
            let songList = document.createElement("ul");

            for (let i = 0; i < songResults.length; i++) {
                let song = songResults[i];

                let songItem = document.createElement("li");
                songItem.innerHTML = `<a href="javascript:void(0)" onclick="selectSong('${song.id}')">${song.name} by ${song.artists[0].name}</a>`;

                songList.appendChild(songItem);
            }

            let songResultsDiv = document.getElementById("song-results");
            songResultsDiv.innerHTML = "";
            songResultsDiv.appendChild(songList);
        } else {
            let songResultsDiv = document.getElementById("song-results");
            songResultsDiv.innerHTML = "Sorry, no songs found.";
        }
    })
    .catch(error => {
        const errorMessage = document.getElementById("error-message");
        errorMessage.innerText = error;
    });
}

function selectSong(songId) {
    fetch("db.php", {
        method: "POST",
        body: JSON.stringify({songId: songId}),
        headers: {
            "Content-Type": "application/json"
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert("Song added to the list!");
        } else {
            alert("Error adding song to the list.");
        }
    })
    .catch(error => {
        console.log(error);
    });
}

Hier ist dann noch die Index.html:

 <!DOCTYPE html>
<html>
<head>
    <title>DJ Song Request</title>
    <script src="script.js"></script>
</head>
<body>
    <h1>DJ Song Request</h1>
    <form>
        <label for="song-name">Enter song name:</label>
        <input type="text" id="song-name" name="song-name">
        <button type="submit" onclick="searchSong()">Search</button>
    </form>
    <div id="song-results"></div>
</body>
</html>

Vielleicht kann mir ja jemand helfen, da ich echt nicht mehr weiter weiß, im vorraus schon mal Vielen Dank ;D

...zum Beitrag

PHP/Passwortvergleich: Warum kommt immer wieder eine Fehlermeldung?

Hallo!

Ich will ein Passwort, das eingegeben wird, vergleichen. Doch es kommt immer wieder diese Fehlermeldung:

Eingegebenes Passwort: n1234
admin:238 Benutzername: nadine
admin:242 Uncaught ReferenceError: form is not defined
  at validatePassword (admin:242:18)
  at HTMLButtonElement.onclick (admin:161:100)

Der Code im AdminController sieht so aus:

public function validatePassword(Request $request, $userName) {
  try {
    $password = $request->input('password');

    // Benutzer anhand des Benutzernamens finden
    $user = User::where('username', $userName)->first();

    // Debugging-Informationen in das Log schreiben
    \Log::info('Benutzername: ' . $userName);
    \Log::info('Benutzer gefunden: ' . ($user ? 'Ja' : 'Nein'));

    if (!$user) {
      return response()->json(['valid' => false, 'message' => 'Benutzer nicht gefunden']);
    }

    // Überprüfen, ob das gespeicherte Passwort im Bcrypt-Format ist
    $passwordInfo = password_get_info($user->password);
    \Log::info('Passwort-Algorithmus: ' . $passwordInfo['algoName']);

    if ($passwordInfo['algoName'] !== 'bcrypt') {
      return response()->json(['valid' => false, 'message' => 'Das gespeicherte Passwort verwendet nicht den Bcrypt-Algorithmus.']);
    }

    // Passwortüberprüfung
    $passwordCheck = Hash::check($password, $user->password);
    \Log::info('Passwort korrekt: ' . ($passwordCheck ? 'Ja' : 'Nein'));

    if ($passwordCheck) {
      return response()->json(['valid' => true]);
    }
    else {
      return response()->json(['valid' => false, 'message' => 'Ungültiges Passwort']);
    }
  }
  catch (\Exception $e) {
    \Log::error('Fehler bei der Passwortvalidierung: ' . $e->getMessage());
    return response()->json(['valid' => false, 'message' => 'Serverfehler. Bitte versuchen Sie es später erneut.'], 500);
  }
}

Und im admin blade so:

function showPasswordModal(route, userName) {
  console.log('showPasswordModal() wurde aufgerufen mit Route:', route);
  $('#passwordModal').modal('show');
  $('#passwordForm').attr('action', route); // Setze die Aktion des Passwort-Formulars auf die gewählte Route
  $('#passwordForm').data('userName', userName);
  console.log(userName);
}

function validatePassword() {
  console.log('validatePassword() wurde aufgerufen');
  var enteredPassword = document.getElementById('passwordInput').value;
  var userName = $('#passwordForm').data('userName');
  console.log('Eingegebenes Passwort:', enteredPassword);
  console.log('Benutzername:', userName);

  $.ajax({
    type: 'POST',
    url: form.action,//$('#passwordForm').attr('action'), // Stellen Sie sicher, dass dies die richtige Route ist
    data: {
      '_token': '{{ csrf_token() }}',
      'password': enteredPassword
    },
    success: function(response) {
      console.log('Server-Antwort:', response);

      if (response.valid) {
        $('#payForm').submit();
      }
      else {
        alert(response.message || 'Falsches Passwort! Bitte versuche es erneut.');
      }
    },
    error: function(xhr, status, error) {
      console.error('AJAX-Fehler:', error);
      alert('Fehler beim Validieren des Passworts. Bitte versuche es später erneut.');
    }
  });

Warum kommt immer wieder eine Fehlermeldung? Ich habe schon alles probiert und das schon seit Stunden! Danke.

...zum Beitrag

Python Referenzen und Objektkopien?

ChatGPT und mein Pythonbuch sagen folgendes:
„In Python werden Objekte durch Referenzen verwaltet, die auf den Speicherbereich zeigen, in dem das Objekt gespeichert ist. Wenn ein Objekt über eine Referenz zugewiesen wird, wird der Speicherplatz für das Objekt reserviert und die Referenz zeigt auf diesen Speicherbereich. Wenn auf denselben Wert bereits von einer anderen Referenz verwiesen wird, zeigt diese Referenz auf dasselbe Objekt/Speicherbereich.“

Aber danach steht in meinem Pythonbuch der Code am Ende dieser Nachricht.
Und über dem Code stand, dass mit diesem y.append(i) eine echte Kopie von x erstellen kann. Aber da ja schon x auf die Liste verweist hätte man nach dem .append() ja zwei Referenzen. Nämlich x und y. Also müsste Python laut der ersten Aussage doch mit beiden Referenzen auf ein und dasselbe Objekt verweisen. Dann wäre es aber keine Kopie mehr, sondern das gleiche Objekt.

Ich hoffe, dass ich mein Problem irgendwie erklären konnte.
LG Code Snake 🙂

import copy

x = [23, "hallo", -7.5]
y = []

for i in x:
    y.append(i)

print("dasselbe Objekt:", x is y)
print("gleicher Inhalt:", x == y)
print()

x = (23, ["Berlin", "Hamburg"], -7.5, 12.67)
y = copy.deepcopy(x)

print("dasselbe Objekt:", x is y)
print("gleicher Inhalt:", x == y)

...zum Beitrag

Java Schleife?

Schreibe eine Methode, die ...

ein Array von 10 ganzen Zahlen erzeugt und dieses mit den Werten 0², 1², 2², ... belegt und ...danach die Zahlen von 9² bis 0² ausgibt

Hätte man nach dem "einfachen code" also quasi bei aufgabe 2 auch folgendes hinschreiben können:

For (i=9; i>zahlen.lenght; i--)

...zum Beitrag

Wie zeichne ich einen Graph in Javascript D3.js?

Ich möchte ein Graphendiagramm erstellen. Dazu habe ich eine JSON-Datei erstellt. Die Skills ("java, python, HTML, json") sind die Knoten und die Indexe (KayO, BenBeck, Borea usw.) sind die Kanten. Der Knoten muss eine Mindestgröße haben und darf nicht zu groß werden. Anschließend möchte ich mit einem Klick auf den Knoten die Liste der Publikationen auf der rechten Seite aufrufen können. Dabei soll der aktuell ausgewählte Knoten in der Visualisierung hervorgehoben werden. Ich habe bereits aus diesem Beispiel (https://bl.ocks.org/heybignick/3faf257bbbbc7743bb72310d03b86ee8) was implementiert. Aber leider komme ich nicht weiter.

Diese ist meine JSON Datei:

const persona = {
    "KayO": {
      firstname: "Kay",
      lastname: "Ohran",
      City: "California",
      skills: "java, python, HTML, json",
    },
    BenBeck: {
      firstname: "Ben",
      lastname: "Beckamm",
      City: "New York",
      skills: "css, ruby, php, training, simulator, java, web, webgl, json",
    };

Das ist mein Code

    const bib = persona;
    console.table(bib);
    const graph = {nodes: [{id: "a"}, {id: "b"}], links: [{source: "a", target: "b"}]};
    const linkColor = d3.scaleLinear().domain([0, 1]).range(["#eee", "#000"]);

    const svg = d3.select("svg");
    const width = +svg.attr("width");
    const height = +svg.attr("height");

    const simulation = d3
      .forceSimulation()
      .force("link", d3.forceLink().id(function (d) { return d.id; }))
      .force("charge", d3.forceManyBody())
      .force("center", d3.forceCenter(width / 2, height / 2));

      //linien -> Kanten
      var link = svg.append("g").attr("class", "links")
      .selectAll("line")
      .data(graph.links).enter().append("line")
      .attr("stroke", "#aaa");

      //kreise -> Knoten
    var node = svg.append("g")
      .attr("class", "nodes")
      .selectAll("circle").data(graph.nodes).enter().append("circle")
      .attr("r", 5).call(d3.drag().on("start", dragstarted).on("drag", dragged).on("end", dragended));

    node.append("title").text(d => d.id);


    simulation.nodes(graph.nodes).on("tick", ticked)
simulation.force("link").links(graph.links);

    function ticked() {
      link
        .attr("x1", d => d.source.x)
        .attr("y1", d => d.source.y)
        .attr("x2", d => d.target.x)
        .attr("y2", d => d.target.y);
      node.attr("cx", d => d.x).attr("cy", d => d.y);
    }

    function dragstarted(event) {
      if (!event.active) simulation.alphaTarget(0.3).restart();
      event.subject.fx = event.subject.x;
      event.subject.fy = event.subject.y;
    }

    function dragged(event) {
      event.subject.fx = event.x;
      event.subject.fy = event.y;
    }

    function dragended(event) {
      if (!event.active) simulation.alphaTarget(0);
      event.subject.fx = null;
      event.subject.fy = null;
    }

...zum Beitrag

Was möchtest Du wissen?

Deinen Beitrag erstellen