javascript - D3.js v4，看不到文字

Question

我正在按照示例 here非常接近，不幸的是我不确定为什么在我的版本中没有显示文本。

我正在线性尺度上进行时间转换，它适用于矩形但不适用于文本。

这是 jsfiddle 链接:

https://jsfiddle.net/e1upd3kn/

JS代码:

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

当你这样做时:

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

您将数据绑定(bind)到非空选择，因为当这段代码运行时，SVG 中已经有一些 text 元素(从您的 x 轴)。

在“输入”选择中，确保您的选择不匹配任何现有元素很重要。

话虽如此，它应该是这样的:

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

这是您的 fiddle :https://jsfiddle.net/ek26rwnq/