I'm trying to organize JS code from different files. I'm using D3.js and I have created 3 visualizations with on the user can interact. For example, if you hover over an element of the first visualization, I would like to change the second and third accordingly.
This procedure works using this code.
index.html:
<body>
<span id='elem1' class='el'></span>
<span id='elem2' class='el'></span>
<span id='elem3' class='el'></span>
<script src='page1.js' rel='script'></script>
<script src='page2.js' rel='script'></script>
<script src='page3.js' rel='script'></script>
</body>
page1.js:
var PAGE1 = (function page1() {
// object to export
var moduleObj = {};
var elem1 = d3.select('#elem1')
.append('svg')
.append('g')
.append('rect')
.attr('id', 'elem1rect')
.attr('width', 50)
.attr('height', 50)
.attr('fill', '#FF5733');
elem1.on('click', function() {
var elemClicked = 'elem1';
console.log('PAGE1 // Click on:', elemClicked);
if(moduleObj.clickElem1ToPage2Handler) {
moduleObj.clickElem1ToPage2Handler(elemClicked);
}
if(moduleObj.clickElem1ToPage3Handler) {
moduleObj.clickElem1ToPage3Handler(elemClicked);
}
});
return moduleObj;
}());
page2.js:
(function page2() {
var elem2 = d3.select('#elem2')
.append('svg')
.append('g')
.append('rect')
.attr('id', 'elem2rect')
.attr('width', 50)
.attr('height', 50)
.attr('fill', '#FFC300');
elem2.on('click', function() {
var elemClicked = 'elem2';
console.log('PAGE2 // Click on:', elemClicked);
});
PAGE1.clickElem1ToPage2Handler = function(clickFrom) {
console.log('PAGE2 // Page2 received click from:', clickFrom);
};
})();
page3.js:
(function page3() {
var elem3 = d3.select('#elem3')
.append('svg')
.append('g')
.append('rect')
.attr('id', 'elem3rect')
.attr('width', 50)
.attr('height', 50)
.attr('fill', '#DAF7A6');
elem3.on('click', function() {
var elemClicked = 'elem3';
console.log('PAGE3 // Click on:', elemClicked);
});
PAGE1.clickElem1ToPage3Handler = function(clickFrom) {
console.log('PAGE3 // Page3 received click from:', clickFrom);
};
})();
Now, however, I would like to be able to do the inverse, that is, by passing the mouse over an element of the second visualization, the first and third visualizations are modified. Likewise, if you hover over an element of the third visualization, the first and second are changed.
In these two cases I have a problem: using the same strategy used earlier does not work anymore. I modify page1.js and page2.js.
page1.js:
var PAGE1 = (function page1() {
// object to export
var moduleObj = {};
var elem1 = d3.select('#elem1')
.append('svg')
.append('g')
.append('rect')
.attr('id', 'elem1rect')
.attr('width', 50)
.attr('height', 50)
.attr('fill', '#FF5733');
elem1.on('click', function() {
var elemClicked = 'elem1';
console.log('PAGE1 // Click on:', elemClicked);
if(moduleObj.clickElem1ToPage2Handler) {
moduleObj.clickElem1ToPage2Handler(elemClicked);
}
if(moduleObj.clickElem1ToPage3Handler) {
moduleObj.clickElem1ToPage3Handler(elemClicked);
}
});
PAGE2.clickElem2ToPage1Handler = function(clickFrom) {
console.log('PAGE1 // Page1 received click from:', clickFrom);
};
return moduleObj;
}());
page2.js:
var PAGE2 = (function page2() {
// object to export
var moduleObj = {};
var elem2 = d3.select('#elem2')
.append('svg')
.append('g')
.append('rect')
.attr('id', 'elem2rect')
.attr('width', 50)
.attr('height', 50)
.attr('fill', '#FFC300');
elem2.on('click', function() {
var elemClicked = 'elem2';
console.log('PAGE2 // Click on:', elemClicked);
if(moduleObj.clickElem2ToPage1Handler) {
moduleObj.clickElem2ToPage1Handler(elemClicked);
}
});
PAGE1.clickElem1ToPage2Handler = function(clickFrom) {
console.log('PAGE2 // Page2 received click from:', clickFrom);
};
return moduleObj;
})();
The error that is generated is:
ReferenceError: PAGE2 is not defined (page1.js:27:2)
TypeError: PAGE1 is undefined (page2.js:24:2)
TypeError: PAGE1 is undefined (page3.js:17:2)
Here is the whole (working) code.
Is there a way to handle all cases (possibly without having to change the entire structure)? Thank you
from Pass variables from one file to another
No comments:
Post a Comment