D3.js v4, nicht in der Lage, Text zu sehen

Question

Ich folge dem Beispiel here sehr eng, leider bin ich nicht sicher, warum in meiner Version Text nicht angezeigt wird.

Ich mache eine Zeitkonvertierung auf einer linearen Skala, es funktioniert für die Rectures aber nicht den Text. Hier

ist die jsfiddle Link:

https://jsfiddle.net/e1upd3kn/

JS-Code:

/*jshint esversion: 6 */ 

const eventHeight = 10; 
const padding = 20; 
let eventYPos = 500; 
let textYPos = 500; 
var parseTime = d3.timeParse("%d-%b-%y"); 

let svgContainer = d3.select("body") 
    .append("svg") 
    .attr("width", 1000) 
    .attr("height", 500) 
    .style("border", "1px dotted silver"); 

var mindate = new Date(1987, 3, 30), 
    maxdate = new Date(2016, 9, 16); 

let events = [ 
    { 
     "start": "1-May-95", 
     "end": "1-May-14", 
     "eventName": "TEST1234", 
     "color": "red" 
    }, 
    { 
     "start": "1-May-01", 
     "end": "1-May-04", 
     "eventName": "4444", 
     "color": "blue" 
    }, 
]; 

var xScale = d3.scaleTime().domain([mindate, maxdate]).range([0, 1000]); 
var axis = d3.axisTop().scale(xScale); 
var xAxisGroup = svgContainer.append("g") 
    .attr("transform", "translate(0," + (50 - padding) + ")") 
    .call(axis); 

events.forEach(function (d) { 
    d.start = parseTime(d.start); 
    d.end = parseTime(d.end); 
}); 

let rects = svgContainer 
    .selectAll("rect") 
    .data(events) 
    .enter() 
    .append("rect"); 
let rectsAttributes = rects 
    .attr("x", function (d) { return xScale(d.start);}) 
    .attr("y", function (d) { eventYPos -= 10; return eventYPos; }) 
    .attr("width", function (d) { return xScale(d.end) - xScale(d.start); }) 
    .attr("height", function (d) { return eventHeight; }) 
    .style("fill", function (d) { return d.color; }); 


let texts = svgContainer 
    .selectAll("text") 
    .data(events) 
    .enter() 
    .append("text"); 
let textLabels = texts 
    .attr("x", function (d) { return xScale(d.start);}) 
    .attr("y", function (d) { textYPos -= 10; return textYPos; }) 
    .text(function (d) { return d.eventName; }) 
    .attr("font-family", "sans-serif") 
    .attr("font-size", "20px") 
    .attr("fill", "black"); 

Answer 1

Wenn Sie dies tun:

let texts = svgContainer 
    .selectAll("text") 
    .data(events) 
    .enter() 
    .append("text"); 

Sie Ihre Daten auf eine Auswahl Bindung das ist nicht leer, denn wenn dieses Stück Code läuft, hast du schon einige text Elemente im SVG (von Ihrer X-Achse).

In einer "Enter" -Auswahl ist es wichtig, sicherzustellen, dass Ihre Auswahl keinem vorhandenen Element entspricht.

Dass gesagt wird, sollte es so etwas wie dieses:

let texts = svgContainer 
    .selectAll(".text")//or anything that doesn't exist 
    .data(events) 
    .enter() 
    .append("text"); 

Hier ist Ihre Geige: https://jsfiddle.net/ek26rwnq/