D3.js v4, 텍스트를 볼 수 없습니다.

Question

예를 들어 here 매우 가깝습니다. 불행히도 내 버전 텍스트가 표시되지 않는 이유는 확실하지 않습니다.

선형 눈금에서 시간 변환을 만들고 있는데, rect는 사용할 수 있지만 텍스트는 사용할 수 없습니다. 당신은 선택에 데이터를 바인딩하고

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 링크입니다 그 코드가 실행될 때 이미을 가지고 있기 때문에 비어 있지 않습니다.SVG의 요소 (사용자 x 축).

"입력"선택에서 선택 사항이 기존 요소와 일치하지 않는지 확인하는 것이 중요합니다.

말했다되고 있다는 것이 이런 식으로 뭔가해야한다 :

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

여기에 귀하의 바이올린입니다 : https://jsfiddle.net/ek26rwnq/