D3.js v4、テキストが表示されない

Question

私は例hereに非常によく似ていますが、残念ながら私のバージョンのテキストが表示されない理由はわかりません。

私はリニアスケールで時間変換を行っていますが、それはテキストではなく矩形に対して機能します。あなたが選択にあなたのデータを結合している

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

：あなたがこれを行うと

/*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

：

https://jsfiddle.net/e1upd3kn/

JSコード：ここで

はjsfiddleリンクありそれは空ではありません。なぜなら、このコードが実行されたときには、すでにある程度の数があるからです。 text（あなたのx軸からの）SVGの要素。

「入力」選択では、選択内容が既存の要素と一致しないことを確認することが重要です。ここで

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

があなたのフィドルです：言われていること

、それはこのようなものでなければなりませんhttps://jsfiddle.net/ek26rwnq/