Einführung in die Erstellung von Tabellen mit D3.js

D3 ist derzeit eine der beliebtesten visuellen JavaScript-Diagrammbibliotheken. D3 verfügt über einen sehr umfangreichen Diagrammtyp und unterstützt das SVG-Format, sodass es häufig verwendet wird. Es gibt auch viele Diagramm-Plug-Ins, die auf D3 basieren, wie z. B. MetricsGraphics .js, das auf D3-Datendiagrammen basiert, ist sehr leistungsfähig.

D3 ist eine Javascript-Bibliothek zur Datenvisualisierung. Verwenden Sie SVG, Canvas und HTML. Kombiniert leistungsstarke Visualisierungstechniken mit einem datengesteuerten Ansatz zur DOM-Manipulation.

Der Unterschied zwischen D3 und JQuery D3 ist datengesteuert, JQuery nicht: Wir verwenden JQuery, um Elemente direkt zu manipulieren, aber wenn wir D3 verwenden
müssen wir D3s proprietäre data(), enter() übergeben; und Exit Die ()-Methode stellt Daten und Rückrufe bereit, und dann bearbeitet D3 die Elemente. D3 wird häufig zur Datenvisualisierung verwendet; JQuery wird zum Erstellen von Webanwendungen verwendet. Es gibt viele Datenvisualisierungserweiterungen für D3; es gibt viele Webanwendungs-Plug-Ins für JQuery. Bei beiden handelt es sich um Javascript-DOM-Manipulationsbibliotheken, die CSS-Selektoren und fließende APIs bereitstellen.

Was ist der Unterschied zwischen D3 und JQuery?

Die am häufigsten verwendete Methode

d3.select(selector): Wählen Sie das erste Element aus, das dem Selektor entspricht. Wenn keine passenden Elemente vorhanden sind, wird eine leere Auswahl zurückgegeben (jedoch nicht null oder undefiniert).

d3.selectAll(selector): Anders als bei select() werden alle passenden Elemente ausgewählt.

selection.append(type): Wenn der angegebene Typ eine Zeichenfolge ist, hängen Sie diesen Typ (Tag-Namen) als neues Element an das letzte untergeordnete Element jedes ausgewählten Elements an.

selection.attr(name, [value]): Wenn der Wert bestimmt ist, setzen Sie den Attributwert namens name in der Auswahl auf value. value kann eine Konstante oder eine Methode sein. Wenn kein Wert angegeben ist, wird der aktuelle Wert des Namensattributs des ersten nicht leeren Elements in der Auswahl zurückgegeben.

selection.data([data[,key]]): Daten und Elemente binden und eine neue Auswahl zurückgeben.

selection.enter(): Gibt die Eingabeauswahl zurück. Zu diesem Zeitpunkt sind die DOM-Elemente kleiner als die entsprechenden Daten. Wird zum Hinzufügen fehlender DOM-Elemente verwendet. Beispiel:

var p = d3.select("body")
  .selectAll("p")
  .data([4, 8, 15, 16, 23, 42])
  .enter().append("p")
  .text(function(d) { return d; });

Wenn der Körper leer ist, erstellt der obige Code ein neues p-Element basierend auf den Daten, fügt es dann dem Körperelement hinzu und setzt den Textinhalt auf die entsprechende Zahl. Die Seitenergebnisse lauten wie folgt:

 <p>4</p>
 <p>8</p>
 <p>15</p>
 <p>16</p>
 <p>23</p>
 <p>42</p>

selection.exit(): Gibt die Exit-Auswahl zurück. Derzeit gibt es mehr DOM-Elemente als entsprechende Daten. Wird zum Entfernen redundanter DOM-Elemente verwendet. Basierend auf dem obigen Beispiel möchten wir beispielsweise die Daten aktualisieren:

p = p.data([1, 2, 4, 8, 16, 32], function(d) { return d; });

Da zu diesem Zeitpunkt die Schlüsselmethode angegeben ist (wird zur Angabe der Reihenfolge von Daten und Elementen verwendet). Matching usw.) und die Daten [ 4,8,16] stimmen mit Elementen überein, die bereits vorhanden sind, sodass die Aktualisierungsauswahl nur 3 p-Elemente enthält. Mit der Enter-Auswahl können wir drei neue Elemente hinzufügen:

p.enter().append("p").text(function(d) { return d; });

Dann müssen wir auch unnötige Elemente entfernen [15, 23, 42]:

p.exit().remove();

Seitenergebnisse:

 <p>1</p>
 <p>2</p>
 <p>4</p>
 <p>8</p>
 <p>16</p>
 <p>32</p>

Histogramm erstellen

Beispiel für ein Balkendiagramm

Wenn Sie D3 verwenden, müssen Sie die Struktur von SVG verstehen. Welche Grafiken sollen gezeichnet werden, welche Beschriftungen müssen verwendet werden und welche Attribute müssen für die Beschriftungen definiert werden.
Erstellen Sie beispielsweise ein Histogramm, hauptsächlich XY-Koordinatenachsen und -spalten. Die XY-Achse verwendet die Linienbeschriftung, um eine gerade Linie zu zeichnen, und die Textbeschriftung, um den Text der Skala anzuzeigen. Die Spalte verwendet das Rect-Tag, um ein Rechteck zu zeichnen. Wenn wir ein Rechteck mit abgerundeten Ecken wünschen, können wir die rx- oder ry-Attribute des rect-Tags festlegen. Wenn wir die Position des Rechtecks ​​festlegen möchten, müssen wir das x festlegen und y-Attribute usw. Auf diese Weise werden Teile zu einem Bild zusammengefügt.

Der folgende Inhalt basiert auf der API von D3 3.x. Einige Schnittstellen unterscheiden sich von D3 4.0.
D3 3.x API-Referenz
D3 4.0 API-Referenz

Root-SVG

D3-Zeichnung Erstellen Sie zunächst ein SVG-Element und definieren Sie dessen Attribute wie Breite und Höhe:

var svg = d3.select(id).append("svg")
  .attr('class', 'svg_timeline')
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom);

Koordinatenachse
Um die Koordinatenachse zu erstellen, müssen Sie zunächst die D3-Skala verwenden. Verwenden Sie die Methode axis.scale([scale]), um den Maßstab der Koordinatenachse festzulegen oder den aktuellen Maßstab zurückzugeben. Skalen sind unterteilt in:

Quantitative Skala: kontinuierliche Daten, wie z. B. Zahlen. Zeitskala: Daten sind Zeit. Ordnungsskala: diskrete Daten wie Name, Kategorie usw.

Wenn wir beispielsweise eine X-Achse mit einer Zeitskala und eine Y-Achse mit einer numerischen Skala erstellen möchten, können wir eine Zeitskala und eine quantitative Skala oder genauer gesagt eine lineare Skala verwenden .

d3.scale.linear(): Erstellt eine lineare Skala. d3.time.scale(): Erstellen Sie eine Zeitskala. Die Ticks und das Tick-Format sind auf die Ortszeit konfiguriert.

Nachdem Sie den Maßstab festgelegt haben, müssen Sie auch den Eingabebereich und den Ausgabebereich festlegen. Der Maßstab einer x-Achse ist beispielsweise:

var x = d3.time.scale()
  .range([0, 坐标轴的宽度])
  .domain(最小日期, 最大日期);

Das Mindestdatum und das Höchstdatum sind beide Datumsobjekte. Legen Sie dann den Maßstab für den einen Tag fest.

tickFormat ermöglicht es uns, das Textformat des Häkchens anzupassen.

//生成x坐标轴
var xAxis = d3.svg.axis()    //新建一个默认的坐标轴
  .scale(x)    //设置比例尺
  .ticks(d3.time.day, 1)   //指定刻度生成的方式
  .tickFormat(function(d){  //自定义刻度文字格式
    var month = d.getMonth() + 1;
    return month+'月'+ d.getDate() +'日';
  })
  .tickPadding([15]) //坐标轴线与文字之间的距离
  .tickSize(-height)
  .orient("bottom"); //位置

值得一说的是，如果数据中对应X轴的数据是字符串，比如‘2017-08-12'。那绑定到页面上的数据是需要被处理的。D3提供解析日期的接口以及日期格式化的接口。

format.parse(string)：把一个字符串string解析为一个日期。 d3.time.format(specifier)：根据给定的specifier创建一个当地时间格式化。

比如：

var parseDate = d3.time.format("%Y-%m-%d").parse; //时间解析器
var date = parseDate('2017-08-12'); //将字符串解析成日期

最后，在svg元素中添加坐标轴：

//添加X轴元素
svg.append("g")
  .attr("class", "axis x")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

selection.call(function[, arguments…])方法调用指定的方法一次，并把selection跟随参数一起传递到方法中。

柱状图中的长方形
具体步骤：将数据跟页面元素绑定，并创建所需要的页面元素，具体设置每个页面元素的样式位置，以及事件监听等。

//添加条形的元素
var bars = svg.selectAll(".barRect")
  .data(ddata)  //绑定数据
  .enter().append("g")  //创建缺少的页面元素
  .attr('class', 'barRect')
  .attr("id", function(d, i) {
    return "barRect-" + i;
  });          

//定义矩形的位置
//x为矩形最左端的位置
//y为矩形最顶端的位置
bars.append("rect")
  .attr('class','bar-rect')
  .attr("width",16)  //长方形的宽度
  .attr("y", function(d) {
    return y(d.value);   //使用比例尺确定坐标Y值
  })
  .attr("x", function(d) {
    return x(d.date) - 8;  //使用比例尺确定坐标X值
  })
  .attr("height", function(d) {  //条形的高度
    return height - y(d.value);
  })
  .attr('rx',10) //圆角
  .attr('ry',10) //圆角
  .attr('fill','url(#linear-gradient)'); //填充渐变色

Das obige ist der detaillierte Inhalt vonEinführung in die Erstellung von Tabellen mit D3.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!