D3.js - Tipps und Tricks - Versionsgeschichte

37.49.72.8 am 7. Juli 2020 um 21:43 Uhr

2020-07-07T21:43:33Z

37.49.72.8: /* Custom Scale */

2020-07-07T18:57:03Z

Custom Scale

37.49.72.8: /* Scale - Farbskala */

2020-07-07T18:55:13Z

Scale - Farbskala

37.49.72.8 am 7. Juli 2020 um 18:54 Uhr

2020-07-07T18:54:10Z

84.136.110.214 am 3. September 2019 um 16:42 Uhr

2019-09-03T16:42:42Z

84.136.110.214 am 2. September 2019 um 16:49 Uhr

2019-09-02T16:49:16Z

84.136.110.214: Die Seite wurde neu angelegt: „== Aktionen abhängig von den Daten ausführen == Will man beim Daten abarbeiten bestimmte Aktionen abhängig von den Daten Ausführen kann man in vielen Fäl…“

2019-09-02T16:26:22Z

Die Seite wurde neu angelegt: „== Aktionen abhängig von den Daten ausführen == Will man beim Daten abarbeiten bestimmte Aktionen abhängig von den Daten Ausführen kann man in vielen Fäl…“

Neue Seite

== Aktionen abhängig von den Daten ausführen ==

Will man beim Daten abarbeiten bestimmte Aktionen abhängig von den Daten Ausführen kann man in vielen Fällen eine anonyme Funktion einsetze oder man nutzt eine Filterfunktion:

Anonyme Funktion für ein HTML-Attribut.
<syntaxhighlight lang="javascript">
g.selectAll('g')
.data(root.descendants())
.enter().append('g')
.attr("class", "node")
.append('path')
.attr("display", function (d) { return d.depth ? null : "none"; }); // do not show root element
</syntaxhighlight>

Filterfunktion
<syntaxhighlight lang="javascript">
newSlice.filter(d => (d.depth > 2))
.on('click', d => {
d3.event.stopPropagation();
focusOn(d);
});
</syntaxhighlight>

← Nächstältere Version		Version vom 7. Juli 2020, 21:43 Uhr
Zeile 120:		Zeile 120:
	var c10 = d3.scale.ordinal()		var c10 = d3.scale.ordinal()
	.range(["#ef7a00", "#f4a24c", "#f7bc7f", "#8aae1a", "#adc65e", "#c4d68c", "#3d3d3c", "#777776", "#9e9e9d", "#899fc4", "#acbcd6", "#c4cfe1"]);		.range(["#ef7a00", "#f4a24c", "#f7bc7f", "#8aae1a", "#adc65e", "#c4d68c", "#3d3d3c", "#777776", "#9e9e9d", "#899fc4", "#acbcd6", "#c4cfe1"]);
		+
		+	== Datensätze verarbeiten ==
		+	=== JSON File vs Inline JSON ===
		+	TODO
		+	<pre>
		+	d3.json("data.json", function(dataset){
		+	//Extract data from dataset
		+	var nodes = dataset.nodes,
		+	...
		+	</pre>
		+	<pre>
		+	var data1 = [ { "My JSON data here" } ];
		+	function getData(){
		+	return{ "nodes": [{"character": "Design", "id": 0, "influence": 15, "zone": 0 },{"character": "Web", "id": 1,"influence": 15, "zone": 1}],"links": [{"source": 0, "target": 1, "weight": 10}]};
		+	}
		+	data1.forEach(function (d) {

@@ Zeile 116: / Zeile 116: @@
 === Custom Scale ===
   const color = d3.scaleOrdinal()
    .range(["#ef7a00", "#f4a24c", "#f7bc7f", "#8aae1a", "#adc65e", "#c4d68c", "#3d3d3c", "#777776", "#9e9e9d", "#899fc4", "#acbcd6", "#c4cfe1"]);

@@ Zeile 112: / Zeile 112: @@
 </pre>
 == Scale - Farbskala ==
 === Custom Scale ===
   const color = d3.scaleOrdinal()
    .range(["#ef7a00", "#f4a24c", "#f7bc7f", "#8aae1a", "#adc65e", "#c4d68c", "#3d3d3c", "#777776", "#9e9e9d", "#899fc4", "#acbcd6", "#c4cfe1"]);

← Nächstältere Version		Version vom 7. Juli 2020, 18:54 Uhr
Zeile 111:		Zeile 111:
	.text(function(d) { return d.parent ? d.data.name : "" });		.text(function(d) { return d.parent ? d.data.name : "" });
	</pre>		</pre>
		+	== Scale - Farbskala ==
		+	=== Custom Scale ===
		+	const color = d3.scaleOrdinal()
		+	.range(["#ef7a00", "#f4a24c", "#f7bc7f", "#8aae1a", "#adc65e", "#c4d68c", "#3d3d3c", "#777776", "#9e9e9d", "#899fc4", "#acbcd6", "#c4cfe1"]);

← Nächstältere Version		Version vom 3. September 2019, 16:42 Uhr
Zeile 80:		Zeile 80:
	.text(d => d.data.name);		.text(d => d.data.name);
	</syntaxhighlight>		</syntaxhighlight>
		+
		+	== Element anhängen statt einfügen ==
		+	Standardmäßig verkettet man Elemente so dass das nächste immer ein Kind Element des vorigen ist.
		+	Manchmal (z.B. bei Labels) möche man aber ein Element als Nachfolger nicht als Kind anlegen.
		+
		+	Dazu nutzt man ein selectAll um auf die vorher angelegten Elemente erneut zuzugreifen.
		+
		+	Beispiel
		+	<pre>
		+	g.selectAll('g')
		+	.data(root.descendants())
		+	.enter().append('g')
		+	.attr("class", "node")
		+	.append('path')
		+	.attr("display", function (d) { return d.depth ? null : "none"; }) // do not show root element
		+	.attr("d", arc)
		+	.attr('id',function(d){return 'path_' + d.data.id})
		+	.style('stroke', '#fff')
		+	.style("fill", function (d) { return color((d.children ? d : d.parent).data.name)})
		+	.on("click",toggleActive);
		+
		+	// Populate the <text> elements with our data-driven titles.
		+	g.selectAll(".node")
		+	.append("text")
		+	.attr("fill","#FFF")
		+	.attr("transform", function(d) {
		+	return "translate(" + arc.centroid(d) + ")rotate(" + computeTextRotation(d) + ")"; })
		+	.attr("dx", "-25")
		+	.attr("dy", ".5em")
		+	.text(function(d) { return d.parent ? d.data.name : "" });
		+	</pre>

@@ Zeile 20: / Zeile 20: @@
        focusOn(d);
      });
 </syntaxhighlight>