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.
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 mostly working code that can load one record, but I'm not sure how to expand it. The closest that I've been able to get is to pull 1 record column names from a csv based on the logic from this bl.ocks code snippet.
How can I modify the function below to pull an entire dataset rather than just one record?
By modifying code from the bl.ocks code, below is what I've been able to achieve. But I'm still having trouble looping the second function into pulling every row. In R, I could do something like rowtoHTML(0:length(data))
var rowToHtml = function( row ) {
var result = "";
for (key in row) {
result += key + ": " + row[key] + "<br/>"
}
return result;
}
var previewCsvUrl = function( csvUrl ) {
d3.csv( csvUrl, function( rows ) {
d3.select("div#preview").html(
"<b>First row:</b><br/>" + rowToHtml( rows[0] ));
})
}
d3.select("body")
.append("div")
.attr("id", "preview")
.style("margin", "5px")
previewCsvUrl("Test.csv")
This question has been asked before. I've tried to do my due diligence by reading through similar questions, but was not able to use the recommended solution based off of my technology constraints or due to inexperience with Javascript. The sample code I've used comes from a trimmed version of this bl.ocks code: http://bl.ocks.org/hlvoorhees/9d58e173825aed1e0218
Edit - I understand that hosting a file locally is the right move, but its not an option for me (hence this approach). Python has been recommended for local hosting, but I'm unable to install it on my machine at this time. I'm working with Edge and IE as my two browser options. I really appreciate the help!
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 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
Hi all I am working in JS plumb library for making connections.I am stuck at one point and need help from experts.
Here is my scenario.
I have many connections and what I want is that when I click on one connection a certain label appears on it to show that it is selected.When I click one some other connection previously clicked connection disappears and new connection get selected.
What I have done so far is that
jsPlumbInst.bind('click', function(c) {
c.showOverlay('selected');
var previously_active = jsPlumbInst.getConnections({scope:"active"});//this function not returning me values
if(previously_active.length != 0) {
/*So never go in this statement*/
previously_active[0].hideOverlay('selected');
previously_active.scope("jsPlumb_DefaultScope");
}
c.scope = "active";
});
Here the problem is that my connection scope is set to "active"
jsPlumbInst.getConnections({scope:"active"})
is not returning anything.
So can any one kindly guide me that whether I am doing right?
Or is there any other way to achieve this?
var sourcecon = jsPlumb.getConnections({source: e}) ;
for(i=0; i<sourcecon.length; i++)
{
var target = getName(sourcecon[i].targetId) ;
var source = getName(sourcecon[i].sourceId) ;
removefrommatrix(source, target,sourcecon[i].sourceId,sourcecon[i].targetId) ;
}
This is code snippet which I am using. It works fine. Your code looks fine except just one difference that you have used jsPlumbInst rather than jsPlumb. I guess that could be the problem. For me its like static class in Java.Not sure about that. But try and see if it could help you.Seems like I am almost a year late in replying. All the best :-)