[英]D3.js v4, not able to see text
我非常密切地关注这里的示例,不幸的是我不确定为什么我的版本文本没有显示。
我正在以线性比例进行时间转换,它适用于矩形但不适用于文本。
这是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");
当你这样做时:
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/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.