I'm brand new to .js classes and my goal is to set a property value for a class that I define in one cell, from within another cell in the same notebook. The cells only contain the code shown here.
Below is the test class in cell 1:
class hist_class {
constructor() {
this.test_value=null;
}
set test_value(newvalue) {
this.test_value=newvalue;
}
}
Here is my attempt to "set" in another cell in the same notebook:
test1 = {
const svg = d3.create("svg")
.attr("width", 100)
.attr("height", 50);
const hist1 = new hist_class();
hist1.test_value = "test value";;
svg.append("text")
.text(hist1.test_value)
.attr("x", 10)
.attr("y", 20);
return svg.node();
}
The error message I encounter is "test1 = InternalError: too much recursion." Since my code closely resembles standard examples (e.g. mozilla, w3schools), I believe the issue lies in how observable processes my code rather than being an actual .js error.
Any advice would be greatly appreciated!
Reason behind my interest:
I am striving to replicate the elegant histogram showcased at this link. However, the chart in this example notebook utilizes items defined in cells outside of the main chart section within the same notebook. My aim is to generate multiple instances of the chart without repeating all separate cells. For this reason, I decided to consolidate all supporting cells into a single class to simplify the external code to just one line. Then within the chart's code, I could create new instances of the class and assign values to its properties as needed.
Ultimately, I prioritize bundling and managing the code effectively. If there is a better .js/observable approach to achieve this besides creating classes, I am open to suggestions.
Thank you once again!