I am able to visualize my D3 chart within a Salesforce LWC component, but now what I want to do is when I click on a selected node within the D3 code, I want to pass the selected node data to a Salesforce variable that I can then pass to my child component which is a modal. The code below shows where I am currently writing the name to another div within the same page, but this doesn't help me when I'm trying to reference the data from a Salesforce variable.
if (d.data.isProduct) {
thisNode.append("rect")
.attr("y", -barHeight / 2)
.attr("height", barHeight)
.attr("width", barWidth)
.style("fill", color)
.attr("class", "product " + d.data.modalName) // Add the select products modalName as a class to be used as a router to say what type of product fields to display
.on("click", function (d) {
// Only Run Logic when a Product is selected
if (d3.select(this).classed("product")) {
//var thisProductNode = d3.select(this);
// Only add product to the 'Selected Product' list if it was not already selected
if (!selectedProducts.includes(d.data.name)) {
selectedProducts.push(d.data.name); // Add selected product to list of selected products to be added to the product catalog
console.log('selected Products in Update: ' + JSON.stringify(selectedProducts, null, 2));
selectedProductsDisplay.append('ul').append('li').text(d.data.name);
}
// Toggle the slds-hide class of the modal depending on current value
// - shoppingCartModal is defined at the top of the initializeD3 function
shoppingCartModal.classed('slds-hide', shoppingCartModal.classed('slds-hide') ? false : true);
}
});
}