I am puzzling over why the following simple update pattern doesn't work. This follows the recommended General Update Pattern , as far as I can see.
<script src="https://d3js.org/d3-selection.v1.min.js"></script>
...
var dat = ["One","Two","Buckle my shoe"];
var sel = d3.selectAll("p.test").data(dat);
sel.enter().append("p").classed("test", true);
sel.exit().remove();
//update 1 ... doesn't work
sel.text(function(d) { return d;})
The paragraphs get created fine, but the text isn't set. However, if I do this:
//update 2 ... this works as expected
d3.selectAll("p.test").text(function(d) { return d;});
...everything works fine. The first version has always worked in the past.
Update: I tried using the full d3 library ...
<script src="https://d3js.org/d3.v4.min.js"></script>
... and the first version works again. Do I need more than d3.selection?
To clarify, my past practice has been to define a separate update function that takes the selection as a parameter. Eg, function doUpdate(sel) { sel.text(...);}This is for cases where I expect the data elements to have few changes in size, but many changes in content. Storing the selection as a variable and repeatedly running updates on it has worked well before.
So after studying the release notes, it seems this is not going to be backwardly compatible, for some good reasons. First, the short answer:
Replace this:
sel.enter().append("p").classed("test", true);
...
sel.text(function(d) { return d;}) //update block
with this:
var update = sel.enter().append("p").classed("test", true).merge(sel);
...
update.text(function(d) { return d;}) //update block
The reason for this is described in this article (thanks #mbostock) and is a fix for empty selector problems with v3. The point I missed at first was that the enter() block needs to run first so that the merge() block has a populated selection to work on. Which means that the merge() call must come off the end of the enter() block chain.
The format of the change documents sort of hid that, because many examples use chains of function calls. I'm used to splitting the enter/update blocks into separate variables. This aids readability (usually) and means I can farm out the enter/update actions to separate functions - more reusable code that way.
So with that in mind, this doesn't work:
var enter = sel.enter();
var update = enter.merge(sel); //Nope! Not populated at this point.
enter.append(...); //too late! Update block uses an empty selection.
But this works okay
var enter = sel.enter();
enter.append(...);
var update = enter.merge(sel); //defined after block is populated
Related
I would like to be able to use the dc.js select menu (dc.selectMenu) in such a way that when I click on an element it gets the value of said element and that becomes the value of the select, once selected it should refresh the data as it normally would if you had just selected in the first place.
The problem I'm having is that I can set the value, but dc.redrawAll() seems to do nothing for me so I think I must be filtering wrongly, but I can't find much information online regarding how to do it other than simply using the filter method (not onclick).
I have tried to set the destination to whatever data-destination is which appears to be working, the value of the select does update when I check with console.log to check the value of the select menu, I then use the dc.redrawAll() function expecting it would filter based on the select option but it does nothing (not even an error in the console)
My function so far is looking like:
function select_destination(ndx) {
var destination_dim = ndx.dimension(dc.pluck('destination'));
var destination_group = destination_dim.group();
var destination = null;
document.addEventListener('click', function(e) {
if (!e.target.matches('.open-popup-link')) return;
e.preventDefault();
var destination = e.target.getAttribute('data-destination').toString();
document.getElementById('select-destination').value = destination;
dc.redrawAll();
});
dc.selectMenu('#select-destination')
.dimension(destination_dim)
.group(destination_group)
.filter(destination);
}
I would expect the graphs to update based on the select option but nothing happens, and I get no error message to go off either.
I suspect I'm using dc.redrawAll() wrongly as if I go to the console and type dc.redrawAll(); I get undefined but I'm really at a loss now and the documentation isn't really helping me at this point so I don't know what else to do.
they are bits of your code that I don't quite understand, for instance why do you have have filter(destination /*=null */)
anyway, So you want to filter the select menu? you can call directly the replaceFilter function with the value, as done in the source code:
menu.replaceFilter(destination);
dc.events.trigger(function () {
menu.redrawGroup();
});
See the source code for the full example of how it's done
https://dc-js.github.io/dc.js/docs/html/select-menu.js.html#sunlight-1-line-129
as for why it doesn't work, I have had some surprising results mixing d3 with pure dom js. Try to rewrite your even handler in d3, eg
d3.select('#select-destination').property('value', destination);
it's possibly that changing the value on the dom directly isn't triggering the change event.
My experience with d3 is that it works better to change the underlying data (call directly filter functions or whatever you want to do) and let dc redraw the needed rather than manipulating the dom directly
I have a dc.rowchart that has 5 different "categories". Initially, all are selected. When I click on one, then only that one is highlighted. When I click on a second one... both the first and second one I clicked are highlighted.
How can I make it/configure the rowchart such that only a single category is highlighted every time a bar is clicked?
dc.filter("category1");
dc.filter("category2");
Both of these in sequence appear to "append" filters than replace.
Ethan's answer is almost there. It's likely unintentional, but dc.js doesn't appear to use the return value for addFilterHandler, so you'll have to modify the filters parameter for it to work, like so:
myChart.addFilterHandler(function (filters, filter) {
filters.length = 0; // empty the array
filters.push(filter);
return filters;
});
This works great as long as your chart doesn't use cap (e.g. a pie chart with limited slices), as this handler prevents the others group from working. I've yet to come up with a satisfactory solution for that case, unfortunately.
I assume you'll want addFilterHandler - https://github.com/dc-js/dc.js/blob/master/web/docs/api-latest.md#dc.baseMixin+addFilterHandler
You'd probably want to do the following, but it's untested.
myChart.addFilterHander(function (filters, filter) {
return [filter];
});
I am using D3's pack(root) method. That method will at some point call the packEnclose method which is not working. Can someone explain how that method works.
The function seems to be working most of the time but when I give it some different data it will sometimes not work.
Below is a code sample of how I call D3 pack
var stratify = d3.stratify()
.parentId(function(d) {
return d.id.substring(0, d.id.lastIndexOf("#")); });
var root = stratify(data)
.sum(function(d) { return d.value; })
.sort(function(a, b) { return (a.value - b.value) })
// .eachAfter(function(node) { node.value = node.data.value;})
var pack = d3.pack()
.size([width - margin, height - margin])
.padding(5);
pack(root);
I have tried enough and I am sure the only difference between a working example and a failing example are the values themselves. If you want to test out I could send you the data arrays, because I cannot attach them to the question.
I never figured this out but found a weird way of fixing the issue. After investigating the difference between the data that worked and the data that didn't I found there was a difference. The data that did not work looked like it was full of integers after writing it to another file, while the data that worked looked like a bunch of floats. Even though I explicitly put parseFloat in my code so both should be floats.
Anyway I just added 0.01 (not 0.000000001 as that would not work for some reason) to every single data point. For some reason this is working and has not cause any problems yet.
I'm using leaflet-ajax to load geoJSON on demand. I want to find the maximum theProperty value so I can use that to scale the feature's fill colors before I add them to the map.
Here's my general approach:
function maxBinPropertyValue(theProperty) {
var theGeoJson = null;
var maxPropertyValue = 0;
var propertyValue = null;
var theGeoJson = new L.GeoJSON.AJAX(binsFileName());
theGeoJson.on('data:loaded', function() {
console.log('The data is loaded');
theGeoJson.eachLayer(function(layer) {
console.log('Looping through the layers');
propertyValue = feature.properties[theProperty];
if (propertyValue > maxPropertyValue) {
maxPropertyValue = propertyValue;
console.log('Max so far: ' + maxPropertyValue);
};
});
});
theGeoJson = null;
console.log('The final maximum value: ' + maxPropertyValue);
return maxPropertyValue;
};
I'm trying to wait for the data:loaded event, then loop through all the features to find the maximum value of theProperty, which is returned to the calling routine.
Except it doesn't work. The first console.log says 'The data is loaded'. The second and third console.logs are never reached, and the fourth and final one reports a value of 0 for maxPropertyValue.
How can I examine all the features in a featureset before styling them, in a way guaranteed to not have asynchronous problems?
PS: I'm pretty sure I can't use onEachFeature: instead of the above approach, because I need to examine every feature's property to determine the maximum value in the set before I can style any of the features.
As for your issue about inspecting your data and retrieving the maximum value, you are indeed facing the classic asynchronous concept of JavaScript.
See How do I return the response from an asynchronous call?
Asynchronism is a problem if not dealt with properly, but an advantage if correctly handled.
To put the concept shortly, you do not manage asynchronism in a "standard" sequential way, but you should rather consider parts of code (callbacks) that are executed at a later time based on events.
Whenever you provide a function as an argument, it is certainly a callback that will be executed at a later time, but very probably much later than the next instructions.
So in your case, your 2nd and 3rd console.log are within a callback, and will be executed once your data is loaded, which will happen much later than your 4th console.log.
As for your next step (styling and adding to map), you actually do not need to perform an extra AJAX call, since you already have all data available in theGeoJson variable. You simply need to refactor / restyle it properly.
It is a good approach to break your problem in small steps indeed.
Good luck!
PS: that being said, ES7 provides async and await functionalities that will emulate a sequential execution for asynchronous functions. But to be able to use those, you need latest browser versions or transpilation, which is probably more work to learn and configure as of today for a beginner than understanding how to work with async JS.
I also had this problem and had to wrap my head around this, so giving an explicit example for solution here;
// make a request with your "url"
var geojsonLayer = new L.GeoJSON.AJAX("url");
// define your functions to interact with data
function thingToDoBeforeLoadingStarts () {
// do stuff
}
function thingToDoForEachFileDownloaded () {
// do stuff
}
function thingToDoAfterAllDownloadEnds () {
// do stuff
}
// attach listeners
geojsonlayer.on("data:loading",thingToDoBeforeLoadingStarts);
geojsonLayer.on("data:progress",thingToDoForEachFileDownloaded)
geojsonLayer.on("data:loaded",thingToDoAfterAllDownloadEnds);
i am missing something basic about d3 selection. using the basic d3 force layout example, i want to select a particular node, say Myriel and make it fixed. following previous hints like this and this, it seems myrielNode = d3.select(["name=Myriel"]) should do it but does not? i've also tried filter() based strategies, ... what am i doing wrong, please?
var myrielDomNode = d3.select('[name="Myriel"]');
var myrielDatum = myrielDomNode.datum();
myrielDatum.fixed = true;
This of course assumes a DOM node exists that has an attribute name="Myriel" and is bound to data such that datum() is an object controlled by the force layout.
Update
Turns out that name was not an attribute of the DOM node, but rather an attribute of the data. In this case, finding the Myriel node becomes a find operation (via filter) on the data array:
myrielNode = nodes.filter(function(d) { return d.name == 'Myriel'; })[0]
You probably want
d3.select('[name="Myriell"]');