{
// Erstelle einen Container, an den wir verschiedene Elemente «anhängen» können
let container = d3.create("div");
// In diesem Container erstellen wir eine Schaltfläche …
let button = container
.append("button")
.text("Klick mich!")
// Die bei jedem Klick einen weiteren Absatz zum Container anfügt
.on("click", (e) => {
list.append("li").text("Der Knopf wurde geklickt!");
});
let list = container.append("ol");
return container.node();
}
{
let container = d3.create("div");
let paragraph = container
.append("p")
.text("Ein ganz einfacher Absatz")
.style("border", "1px dotted #ddd")
.on("mouseenter", (e) => {
d3.select("#result")
.append("li")
.text("Die Maus trat in die Box des Absatzes ein");
})
.on("mouseleave", (e) => {
d3.select("#result").append("li").text("Die Maus hat die Box verlassen.");
})
.on("click", (e) => {
d3.select("#result").append("li").text("Yikes! Da gab es ein Klick!");
})
.on("dblclick", (e) => {
d3.select("#result").append("li").text("Ooooh, sogar ein Doppelklick!");
});
let result = container
.append("ol")
.attr("id", "result")
.text("I will react to what happened");
return container.node();
}
{
let form = d3.create("form");
let inputField = form
.append("input")
.on("mouseover", (e) =>
result.append("li").text("Maus kam auf das Input-Feld")
)
.on("focus", (e) => result.append("li").text("Feld ist fokussiert"))
.on("blur", (e) =>
result.append("li").text("Feld ist nicht länger fokussiert")
)
.on("input", (e) => result.append("li").text("Eingabe wurde getätigt"));
let result = form
.append("ol")
.text("Ich liste auf, was für Events passieren");
return form.node();
}
Mit jedem Aufruf des Event-Handlers wird auch ein Event-Objekt mitgegeben, das viele zusätzliche Informationen enthält, die man auslesen kann:
mutable eventData = ({})
{
// Erstelle einen Container, an den wir verschiedene Elemente «anhängen» können
let container = d3.create("div");
// In diesem Container erstellen wir eine Schaltfläche …
let button = container
.append("button")
.text("Klick mich!")
// Die bei jedem Klick einen weiteren Absatz zum Container anfügt
.on("click", (e) => {
mutable eventData = e;
});
return container.node();
}
{
let input = d3.create("input").on("input", (e) => (mutable eventData = e));
return input.node();
}
mutable inputValue = ""
{
let input = d3
.create("input")
.on("input", (e) => (mutable inputValue = e.currentTarget.value));
return input.node();
}
data = [
{ label: "eins", val: 0.1 },
{ label: "zwei", val: 0.33333333 },
{ label: "drei", val: 0.5 },
{ label: "vier", val: 0.666667666 },
{ label: "fünf", val: 0.75 },
{ label: "sechs", val: 0.9 },
{ label: "sieben", val: 1 }
]
mutable selectedData = ({})
{
let list = d3.create("ul");
list
.selectAll("li")
.data(data)
.join("li")
.text((d) => d.label)
.on("click", (e, d) => (mutable selectedData = d));
return list.node();
}
mutable sum = 0
{
let list = d3.create("ul");
list.text(`Bisher zusammengeklickte Summe: ${sum}`);
list
.selectAll("li")
.data(data)
.join("li")
.text((d) => d.label)
.style("background-color", (d) =>
d.label === selectedData.label ? "#ddd" : "transparent"
)
.on("click", (e, d) => {
mutable sum = sum + d.val;
mutable selectedData = d;
});
return list.node();
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
