我想在g元素中绘制三种不同的形状。我想绘制文字,线条和图形。我使用下面的代码的问题是文本显示但行不显示。它被绘制,我可以在源中看到它,但它在屏幕上不可见。我在这里缺少什么?
//Bind data to a new g element
line = svg.selectAll("g")
.data(source)
.enter()
.append("g")
.attr({
"transform": function(d,i){ return "translate(50 " + (height - 50 + 15 * i) + ")"}
});
line.append("text")
.text(function(d,i){
return d.name;
});
line.append("line")
.attr({
"opacity" : 1,
"stroke-width" : 2,
"stroke" : "blue",
"class" : "crisp",
"x1" : function (d) { return vfTimelineScale(d.start); },
"y1" : function (d,i) { return (height - 50 + 15 * i); },
"x2" : function (d) { return vfTimelineScale(d.stop); },
"y2" : function (d,i) { return (height - 50 + 15 * i); },
})
答案 0 :(得分:2)
您已经通过转换定位,我认为您不需要从文本垂直偏移450
px的行。将公式更改为诸如......
"x1" : function (d) { return vfTimelineScale(d.start); },
"y1" : 50,
"x2" : function (d) { return vfTimelineScale(d.stop); },
"y2" : 50
您需要更改50
值以满足您的需要。