I am trying, usin D3js data bindins, to append rectangles as children of a transformed svg element.
My rectangles actually get appended but they are appended to the html element (I mean the root element of the html document) and not as children of the g element I thought would be their parent node.
How can I them appended as children nodes of the g element?
//var svgTranslate = (sgv:g with some transform applied)
var myclassSelection = svgTranslate.select('rect.myclass');
var myclassBinding = myclassSelection.data(data);
var myclassBindingEnter = myclassBinding.enter();
myclassBindingEnter
.append('rect')
.attr('class','myclass')
.attr('x', function(d) { return d[0]; })
.attr('y', 0)
.attr('width', function(d) { return d[1]; })
.attr('height', 25)
;
As replied by Lars Kotthoff in the comments, I had to ue .selectAll() instead of .select()
Related
If I have nested array like this
var ar = [[[1,0],[2,0],[3,0]], [[1,0],[2,0],[3,0]]]
I want to create two svg elements, this is easy
var svg = d3.select('div.main`)
.selectAll('svg')
.data(ar)
.enter()
.append('svg')
And now I want to bind subarrays to svg selection, something like this
var g = svg.selectAll('g')
.data(function(d,i) {return d[i];})
.enter()
.append('g')
after that the data attached to g should be
[[1,0],[2,0],[3,0]]
I know what this line is not correct .data(function(d,i) {return d[i];}) Just do not know how to explain it different way.
If I understand the question correctly,
Your are right, the issues arise from the identified line. You don't need to return d[i] as the data for the new selection, d represents each individual datum associated with each svg, d[i] represents only a one part of each datum.
If you want each datum, in its entirety, just append a g as normal:
var g = svg.append("g");
Try console.log on g.data() and you will see that your data is there still as you want, it is bound to each g.
You can then use each of these datums, bound to each g and carried over from each svg, as data to create new features. Passing the datum looks like: .data(function(d) { return d; }). The snippet below should help put it all together:
var data = [[[10,10],[30,30],[50,50]], [[10,20],[80,30],[50,60]] ];
var svg = d3.select('body')
.selectAll('svg')
.data(data)
.enter()
.append('svg')
.attr("height",100)
.attr("width",200);
var g = svg.append("g");
console.log("Data Bound To First G in First SVG:")
console.log(g.data()[0]);
console.log("Data Bound To Second G in Second SVG:")
console.log(g.data()[1]);
// Data is now available to make features:
g.selectAll("circle")
.data(function(d) { return d; })
.enter()
.append("circle")
.attr("r",10)
.attr("cx",function(d) { return d[0] })
.attr("cy",function(d) { return d[1] });
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>
I do have a d3.scaleTime() as x-axis and JSON data with dates, which should be represented as an rect on this x-axis, in order to mark the date as "reserved".
The simple way is
this.svg.selectAll('rect').data(dates).enter().each(function(d) {
d3.select(this)
.append("rect")
.attr('height', desiredHeight)
.attr('width', desiredWidthFromTickToTick)
.attr('x', x(d.date));
}
But I would like to group rects, if they have consecutive dates, in order to be able to move the group around on the x-axis.
What I did / tried is in the enter / each function to check, if there is already a group with a date "next" to the current date.
If not, create a new group and append the current date-rect.
If there is a group, get the group and append the date-rect to the existing group.
But now, the problem is, that the rects don't keep their data and / or I can't add the rect to the group properly.
Some (pseudo)code:
var rects = this.svg.selectAll('rect') .data(dates, function(dataElement) {
return dataElement.id;
});
// add new date rects
rects.enter().each(function(dataElement) {
var isNewDateGroup = true / false; // detect if date is "next" to another one
if (isNewDateGroup)
{
var group = svg.append("g");
var dateRect = d3.select(this)
.append("rect")
.attr('height', desiredHeight)
.attr('width', desiredWidthFromTickToTick);
group.append(function() {
// works correctly, appends the rect and sets the data
return dateRect.select('rect').node();
});
// translate group to desired x(d.date)
}
else
{
var group = getGroupForDate();
var dateRect = d3.select(this)
.append("rect")
.attr('height', desiredHeight)
.attr('width', desiredWidthFromTickToTick)
.attr('x', offsetToLastRectInGroup);
group.append(function() {
// does not work correctly, does not append the rect and does not set the data
return dateRect.select('rect').node();
});
}
});
Basically, the enter function does not work, if I append more then one SVG element, since the data gets confused and the appending as well.
Any hints, how I can group my rects?
The answer on this question helped me to solve my problem:
Since .select() propagate the data to the selected elements, I just have to get rid of the selection:
var dateRect = d3.select(this)
.append("rect")
.attr('height', desiredHeight)
.attr('width', desiredWidthFromTickToTick)
.attr('x', offsetToLastRectInGroup);
group.append(function() {
return dateRect.node();
});
I am attempting to access the data index of a shape on mouseover so that I can control the behavior of the shape based on the index.
Lets say that this block of code lays out 5 rect in a vertical line based on some data.
var g_box = svg
.selectAll("g")
.data(controls)
.enter()
.append("g")
.attr("transform", function (d,i){
return "translate("+(width - 100)+","+((controlBoxSize+5)+i*(controlBoxSize+ 5))+")"
})
.attr("class", "controls");
g_box
.append("rect")
.attr("class", "control")
.attr("width", 15)
.attr("height", 15)
.style("stroke", "black")
.style("fill", "#b8b9bc");
When we mouseover rect 3, it transitions to double size.
g_box.selectAll("rect")
.on("mouseover", function(d){
d3.select(this)
.transition()
.attr("width", controlBoxSize*2)
.attr("height", controlBoxSize*2);
var additionalOffset = controlBoxSize*2;
g_box
.attr("transform", function (d,i){
if( i > this.index) { // want to do something like this, what to use for "this.index"?
return "translate("+(width - 100)+","+((controlBoxSize+5)+i*(controlBoxSize+5)+additionalOffset)+")"
} else {
return "translate("+(width - 100)+","+((controlBoxSize+5)+i*(controlBoxSize+5))+")"
}
})
})
What I want to do is move rect 4 and 5 on mouseover so they slide out of the way and do not overlap rect 3 which is expanding.
So is there a way to detect the data index "i" of "this" rect in my mouseover event so that I could implement some logic to adjust the translate() of the other rect accordingly?
You can easily get the index of any selection with the second argument of the anonymous function.
The problem here, however, is that you're trying to get the index in an anonymous function which is itself inside the event handler, and this won't work.
Thus, get the index in the event handler...
selection.on("mouseover", function(d, i) {
//index here ---------------------^
... and, inside the inner anonymous function, get the index again, using different parameter name, comparing them:
innerSelection.attr("transform", function(e, j) {
//index here, with a different name -----^
This is a simple demo (full of magic numbers), just to show you how to do it:
var svg = d3.select("svg");
var data = d3.range(5);
var groups = svg.selectAll("foo")
.data(data)
.enter()
.append("g");
var rects = groups.append("rect")
.attr("y", 10)
.attr("x", function(d) {
return 10 + d * 20
})
.attr("width", 10)
.attr("height", 100)
.attr("fill", "teal");
groups.on("mouseover", function(d, i) {
d3.select(this).select("rect").transition()
.attr("width", 50);
groups.transition()
.attr("transform", function(e, j) {
if (i < j) {
return "translate(40,0)"
}
})
}).on("mouseout", function() {
groups.transition().attr("transform", "translate(0,0)");
rects.transition().attr("width", 10);
})
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>
PS: don't do...
g_box.selectAll("rect").on("mouseover", function(d, i){
... because you won't get the correct index that way (which explain your comment). Instead of that, attach the event to the groups, and get the rectangle inside it.
I'm pretty sure d3 passes in the index as well as the data in the event listener.
So try
.on("mouseover", function(d,i)
where i is the index.
Also you can take a look at a fiddle i made a couple months ago, which is related to what you're asking.
https://jsfiddle.net/guanzo/h1hdet8d/1/
You can find the index usign indexOf(). The second argument in the event mouseover it doesn't show the index in numbers, it shows the data info you're working, well, you can pass this info inside indexOf() to find the number of the index that you need.
.on("mouseover", (event, i) => {
let index = data.indexOf(i);
console.log(index); // will show the index number
})
I'm new to D3 and am trying to build a table like structure out of rectangles. I would like the header to be a different color than the rest of the rectangles. I've written the following code:
table = svgContainer.selectAll('rect')
.data([managedObj])
.enter()
.append('rect')
.attr("width", 120)
.attr("height", 20)
.attr("fill", "blue")
.text(function(d) {
return d.name;
});
// create table body
table.selectAll('rect')
.data(managedObj.data)
.enter()
.append('rect')
.attr("y", function() {
shift += 20;
return shift;
})
.attr("width", 120)
.attr("height", 20)
.attr("fill", "red")
.text(function(d) {
return d.name;
});
This is producing the following results:
This is almost what I intended except it is nesting the second group of rectangles inside the first rectangle. This causes only the first blue rectangle to be visible. I'm assuming this has something to do with calling the data method twice. How can I fix this issue?
I think I understand the intended result, so I'll give it a go:
This line :
table.selectAll('rect')
is selecting the rectangle just created here:
table = svgContainer.selectAll('rect')....append('rect')....
You don't want to append rectangles to that rectangle (or any rectangle for that matter) because this won't work, but you do want to append them to the SVG itself.
So instead of table.selectAll you should be using svgContainer.selectAll, but there are two other issues:
if you use svgContainer.selectAll('rect') you will be selecting the rect you have already appended, when you actually want an empty selection. See the answer here.
you cannot place text in a rect (See answer here), instead you could append g elements and then append text and rect elements to those. And, for ease of positioning, you could translate the g elements so that positioning the rectangles and text is more straight forward.
So, your code could look like:
var data = ["test1","test2","test3","test4"];
var svgContainer = d3.select('body').append('svg').attr('width',900).attr('height',400);
var header = svgContainer.selectAll('g')
.data([data])
.enter()
.append('g')
.attr('transform','translate(0,0)');
header.append('rect')
.attr("width", 120)
.attr("height", 20)
.attr("fill", "blue");
header.append('text')
.attr('y',15)
.attr('x',5)
.text(function(d) {
return "header";
});
// create table body
var boxes = svgContainer.selectAll('.box')
.data(data)
.enter()
.append('g')
.attr('class','box')
.attr('transform',function(d,i) { return 'translate(0,'+((i+1)*20)+')'; });
boxes.append('rect').attr("width", 120)
.attr("height", 20)
.attr("fill", "red");
boxes.append('text')
.attr('y',15)
.attr('x',5)
.text(function(d) {
return d;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
I'm rendering data with d3. I have a nodes list from which I construct a bunch of SVG groups using .enter(), like this (simplified):
nodes = [{name: "Fred"}, {name: "Barney"}];
var node = vis.selectAll(".node")
.data(nodes)
.enter().append("svg:g")
.attr("class", "node");
var circ = node.append("svg:circle")
.attr("x", 0)
.attr("y", 0)
.attr("r", 10)
node.append("svg:text")
.attr("dx", 0)
.attr("dy", 0)
.text(function(d) { return d.name });
However, if I edit a listitem's name, the SVG text element does not update (because its text attr is only called on creation). How do I tell d3 to "recreate" the SVG group corresponding to a changed listitem? I'm doing this as part of a force layout, so I could set the text attr on every tick, but that's rather inelegant.
What's needed is to feed the data back into the nodes again. So, when I've updated the nodes list, I do this:
vis.selectAll(".node text")
.data(nodes)
.text(function(d) { return d.name });
and that recalculates.