I need to append a number of div elements based on the result of calling my db, and inside those div elements append other elements.
For example, I get back 10 rows, so I have to append 10 texts and 10 lines (the divs) on each of which I am appending some circles based on the data for each row. Since the number of circles is unbounded, I was thinking of appending a scrollable div.
Now that I have done this, the elements are appended with the right attributes (according to developer tools), but one cannot see them on the page!
Is there a way to dynamically append divs so that the elements within them are visible?
Related
This may be a silly question, but I just can't figure out when to use .join and when to use .append in D3.
Like in this block, I don't know why to use join rather than append here.
elements.selectAll('circle')
.data(d=>d.values)
//.append('circle')
.join('circle')
.attr("class","dots")
.attr('r',2)
.attr('fill',d=>colorScale(d['track']))
.attr("cx", d=>dateScale(d['edate']))
.attr("cy", d=>valueScale(d['record_time']));
Can anybody help me to understand that?
TL;DR
selection.append by itself merely appends a single child element to every element in the selection it is called on (inheriting its parent's datum). selection.join() is data dependent: it conducts an enter/update/exit cycle so that the number of matching elements in the DOM matches the number of data array items.
The code you have suggests that you want to use .enter().append("circle") as opposed to merely .append("circle"): this completes the enter() portion of the enter/update/exit cycle that is also completed by using .join().
You can use join or individual enter/exit/update selections to achieve the same results, join is just a convenience, as stated in the docs:
This method is a convenient alternative to the explicit general update
pattern, replacing selection.enter, selection.exit, selection.append,
selection.remove, and selection.order. (docs)
Enter/Update/Exit
When you see selectAll() followed by .data() we are selecting all matching elements, for each one that exists, we bind an item from the data array to it. The use of .data() returns what is called the update selection: it contains existing elements (if any) with the newly supplied data bound to those existing items.
However, if the number of selected elements does not match the number of items¹, then .data() creates an enter selection or an exit selection. If we have excess data items, then we have an enter selection with one element for every item we need to add in order to have an equal number of DOM elements and data array items. Conversely, if we have excess DOM elements, then we have an exit selection.
Calling .enter() on the update selection returns the enter selection. This selection contains placeholders ("Conceptually, the enter selection’s placeholders are pointers to the parent element docs"), which we can use .append("tagname") with to add the elements we need.
Conversely, calling .exit() on the update selection returns the exit selection, which often is simply removed with .exit().remove();
This pattern generally looks something like this:
let circle = svg.selectAll("circle")
.data([1,2,3,4])
circle.exit().remove();
circle.enter()
.append("circle")
.attr...
circle.attr(...
First we select the all the circles, let's say there are 2 circles to select.
Second we remove excess elements using selection.exit() : however, since we have four data items and only two matching DOM elements there is nothing to remove, so the selection is empty and nothing is removed.
Third we add elements as required to ensure that the number of matching DOM elements is the same as the number of data array items. As we have four data items and only two matching DOM elements the enter selection contains two placeholders (pointers to the parent). We append circles to them and style them as we want.
Lastly we use the update selection containing the two pre-existing circles and style them as we want based on the new data.
Often we want to style new elements and existing elements the same, so we could use the merge method to combine the enter and update selections:
let circle = svg.selectAll("circle")
.data([1,2,3,4])
circle.exit().remove();
circle.enter()
.append("circle")
.merge(circle)
.attr(...
This simplifies our code a bit as we don't need to duplicate styling for both enter and update separately.
Join
So where does .join() come in? Its for convenience. In its simplest form: .join("elementTagName") .join replaces the above code with:
let circle = svg.selectAll("circle")
.data([1,2,3,4])
.join("circle")
.attr(...
Here the join method removes the exit selection and returns a merged update selection and enter selection (containing new circles), which we can now style as needed. It is essentially a short hand method that allows you to write more concise code, but is functionally the same² as the 2nd code block.
Your Code
In your code, you have a selection of one or more elements (a/some parent element/s). The bound datum contains a child array, which you wish to use to create child elements. In order to do so you provide to .data() that child data array:
parentElements.selectAll("circle")
.data(d=>d.values)
You can follow that up with .join(): this will do the enter/update/exit cycle for every parent element so that they each have the proper amount of circles and returns a selection of all these circles.
You cannot use just .append() because that would append one circle to every parent element, returning a selection of these circles. This is very unlikely to be the desired result.
Instead, as noted at the top of this answer, you can use .enter().append("circle") so that you are using the pattern correctly.
You only need the enter selection if you create the elements once and never update the data, otherwise, you'll need to use enter/update/exit methods to handle excess elements, excess data items, and updated elements.
Ultimately, the difference between join and enter/update/exit is a matter of code preference, style, succinctness, but otherwise, there is nothing that you can't do with one that you can't do with the other.
¹ Assuming the provision of only one parameter to .data() - the 2nd, optional, parameter is a keying function which matches DOM element and data item based on a key. DOM elements without a matching datum are placed in the exit selection, data array items without a matching DOM element are placed in the enter selection, the remainder are placed in the update selection.
² Assuming that .join() is not provided its second or third parameters, which allow more granular control of the enter/exit/update cycle.
I have the following RDL setup: a single rectangle that contains 3 elements (an image, and 2 textboxes). Underneath the rectangle, I have multple tablixes, lets say 3 for now, but this number will increase or decrease dynamically as I am constructing the RDL markup with XML within my .net app. Each tablix will have it's own unique dataset (data and columns differs between the tablixes).
In order to render each tablix on a new page, I went ahead and added a PageBreak:End on each tablix, except the last one. Now, I need the rectangle to be repeated on each page, but how do I do this? I thought that maybe the RepeatWith property could be used, but this only allows a single selected data region. So, the rectangle rendered on page 1 and page 3 (not on page 2).
Any help would be greatly appreciated thanks
You could place the rectangle in the report header to repeat on each page:
https://blogs.msdn.microsoft.com/selvar/2010/12/27/report-headers-and-footers-with-microsoft-sql-server-reporting-services/
I use inline CKEditor for editing elements on my page. So when I click into DIV with some class, CKEditor is attached to it and when it loses focus, editor instance is destroyed. I need to insert HTML element into that DIV after CKEditor instance is destroyed - to the last position of cursor before destroying editor instance. So I basicaly need to know index of cursor in edited element's HTML, as it would be taken as a plain text (for this example below it would be 25). I don't want to modify original data.
I have HTML in my DIV like this:
"some <span>text</span> wi|th <b>html</b> tags" (where "|" is cursor position)
I tried to get range and extend it to the start of editable element:
var range = editor.getSelection().getRanges()[ 0 ];
range.collapse( true );
range.setStartAt( editor.editable(), CKEDITOR.POSITION_AFTER_START );
Here range.endOffset is 3 (the same as if I didn't extend range). But even if I sum up offsets of more elements, it wouldn't solve my problem, because it exclude HTML tags.
You won't be able to use ranges if you want to use them after the editor is destroyed, because while being destroyed the editor replaces editable's inner HTML with the data and they are not the same thing.
Instead, you should create a marker for the selection before the editor is destroyed and find this marker in the data.
See this topic for ideas how to achieve that: Retain cursor position after reloading the page in CKEditor.
I have a combined bar / line chart. For each row in the input file, I create a group that contains multiple elements (lines, rectangles, texts):
var myGroups = svg.selectAll('g').data(myData)
myGroups.enter().append('g')
...
myGroups.append('line')
...
myGroups.append('polygon')
...
myGroups.append('text')
...
I currently just
svg.selectAll('*').remove()
and create everything from scratch every time the data are updated. However, I'd like to have a smooth transition for all elements.
I've gone through this tutorial several times, but I still don't understand how I can do it in my case.
The key is to handle all the selections, not just the enter selection:
var myGroups = svg.selectAll('g').data(myData);
// enter selection
var myGroupsEnter = myGroups.enter().append("g");
myGroupsEnter.append("line");
myGroupsEnter.append("polygon");
// ...
// update selection -- this will also contain the newly appended elements
myGroups.select("line").attr(...);
// ...
// exit selection
myGroups.exit().remove();
There are two things here that warrant further explanation. First, elements in the enter selection that have had new elements appended merge into the update selection. That is, there is no need to set attributes on the elements in the enter selection if the same thing happens in the update selection. This allows you to append new elements and update existing ones without duplicating code.
The second thing becomes important on subsequent calls with updated data. As the elements you're binding the data to are not the ones that are actually drawn, the new data needs to be propagated to them. This is what .select() does. That is, by doing myGroups.select("line"), you're propagating the new data bound to the g elements to their children line elements. So the code to set attributes is the same as for the enter case.
Now you can simply add transitions where desired before setting the new attributes.
I got the problem that my RDLC-Report always repeats the whole header, if there is data or not, it always repeats the blank space.
I dont want to use a Rectangle instead of my header or something, is there a workaround with let this header-data in the header?
I dont want to have this blank spaces, i wanna see my body there.
Thanks in ancipiation
Alex
You can try a group header...? Hide the row(s) if there's no data for it, and that won't leave a space... set the header to repeat on each page.
Would that be an option?
I've done a few reports that required a footer but some of the stuff in there was only needed on the last page but I didn't want that huge white space in the footer area when the visibility was set to hide for all the pages but the last one... A group footer didn't work for me because I needed certain things at the very bottom of every page (like a form) and you can't access the globals from in the body of the report to toggle visibility... Ultimately I had to setting for that stuff I wanted on the last page to be at the end of the data, meaning it might be in the middle of the last page.... But I positioned my main tablix inside a big rectangle that's is equal to the whole page length - margin size - header length - footer length - (that rectangle I want on the last page).length so that if there is only one row of data, that last page item isn't directly below it but actually right above the footer where it should be. However, if the data is more than a page, that rectangle is just at the end of the data, which is an okay compromise.