I am using this calendar example: and I want to put the value that appears in the mouseover inside each cell so it's always visible. I've tried adding this, which I thought would print '!!!' in each cell but it doesn't:
rect.append("text")
attr("dx", "+.65em")
.attr("dy", "+.65em")
.attr("opacity", "1")
.text(function(d) { return '!!!'; });
but it doesn't do anything
I am using this calendar example: http://bl.ocks/KathyZ/c2d4694c953419e0509b and I want to put the value that appears in the mouseover inside each cell so it's always visible. I've tried adding this, which I thought would print '!!!' in each cell but it doesn't:
rect.append("text")
attr("dx", "+.65em")
.attr("dy", "+.65em")
.attr("opacity", "1")
.text(function(d) { return '!!!'; });
but it doesn't do anything
Share Improve this question asked Jan 13, 2016 at 20:43 nickponlinenickponline 26k34 gold badges106 silver badges179 bronze badges 2- stackoverflow./questions/20644415/… – Marc Commented Jan 13, 2016 at 20:48
-
Can't append a
textelement to arect. Create agand append the both therectandtextto it. – Mark Commented Jan 13, 2016 at 20:51
2 Answers
Reset to default 3As I said in my ments, you want to group your rect and text in a g element. Here's the simplest example:
<!DOCTYPE html>
<html>
<head>
<script data-require="[email protected]" data-semver="3.5.3" src="//cdnjs.cloudflare./ajax/libs/d3/3.5.3/d3.js"></script>
</head>
<body>
<script>
var data = [{
x: 20,
y: 30,
text: "Hi"
}, {
x: 100,
y: 200,
text: "bye"
}];
var svg = d3.select("body")
.append("svg")
.attr("width", 500)
.attr("height", 500);
var g = svg.selectAll('.someClass')
.data(data)
.enter()
.append("g")
.attr("class","someClass")
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
g.append("rect")
.attr("width", 40)
.attr("height", 40)
.style("fill", "red");
g.append("text")
.style("fill", "black")
.text(function(d) {
return d.text;
})
</script>
</body>
</html>For the specific code you are looking at .day bees a g:
var g = svg.selectAll(".day")
.data(function(d) {
return d3.time.days(new Date(d, 0, 1), new Date(d + 1, 0, 1));
})
.enter().append("g")
.attr("class", "day")
.attr("transform", function(d){
var month_padding = 1.2 * cellSize*7 * ((month(d)-1) % (no_months_in_a_row));
var x = day(d) * cellSize + month_padding;
var week_diff = week(d) - week(new Date(year(d), month(d)-1, 1) );
var row_level = Math.ceil(month(d) / (no_months_in_a_row));
var y = (week_diff*cellSize) + row_level*cellSize*8 - cellSize/2 - shift_up;
return "translate(" + x + "," + y + ")";
});
var rect = g.append("rect"))
.attr("width", cellSize)
.attr("height", cellSize)
.datum(format);
g.append("text")
.text("!!!")
.style("fill", "black");
// etc, etc, etc....
the text attribute doesn't mean anything for a rect object. you want to add a separate text element:
.enter().append("svg:text") and then
.text(function(d) { return '!!!' });
and you can style the text element accordingly.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744989532a4604816.html
评论列表（0条）