My code involves reading data from a JSON file using D3, and then passing it to another function. Here's an example:
<!doctype html>
<html lang="en>
<head>
<meta charset="utf-8">
<title>Sample venn.js demonstration</title>
</head>
<style>
div {
max-width: 300px;
height: 400px;
margin: 0;
padding: 0;
}
</style>
<body>
<div id="weighted_example"></div>
</body>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="../venn.js"></script>
<script>
var sets = [{}];
d3.json("json", function(data)
{
sets=data; // successful read
});
alert(sets); // I need this alert to pass the value to div.datum(sets) for it to not be null.
var div = d3.select("#weighted_example")
div.datum(sets).call(venn.VennDiagram())
</script>
</html>
Here's the content of the JSON file:
[ { "sets": [0], "size": 1958 }, { "sets": [1], "size": 1856 }, { "sets": [2], "size": 1297 }, { "sets": [0, 1], "size": 220 }, { "sets": [2, 0], "size": 123 }, { "sets": [2, 1], "size": 139 } ]
I'm encountering an issue where seemingly unrealistic null values are passed if I don't include the alert(sets) in the d3.json() function, even though logially the value should have been assigned based on the successful read. Any thoughts on how to troubleshoot or fix this error?