我非常仔细地关注示例here,遗憾的是我不确定为什么我的版本文本没有显示。
我在线性刻度上进行时间转换,它适用于rects但不适用于文本。
这是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");
答案 0 :(得分:1)
执行此操作时:
let texts = svgContainer
.selectAll("text")
.data(events)
.enter()
.append("text");
您将数据绑定到非空的选择,因为当这段代码运行时,您已经在SVG中有一些text
个元素(来自您的x轴)。
在“输入”选项中,确保您的选择与任何现有元素都不匹配非常重要。
话虽如此,它应该是这样的:
let texts = svgContainer
.selectAll(".text")//or anything that doesn't exist
.data(events)
.enter()
.append("text");
这是你的小提琴:https://jsfiddle.net/ek26rwnq/