I am currently working on a d3 chart that is generated from JSON data created with PHP. The process runs smoothly as the PHP accurately formats the JSON and the chart displays correctly. You can view the chart here. Additionally, I have provided the complete JavaScript code below:
var margin = {top: 50, right: 150, bottom: 50, left: 150},
w = 2500 - margin.left - margin.right,
h = 500 - margin.top - margin.bottom;
var json = <?php echo $json; ?>;
console.log(json);
d3.json("MM_chart.json", function(error, json) {
if (error) throw error;
var items = json.items;
var locations = json.locations;
var directions = json.stage_directions;
console.log(items);
console.log(locations);
console.log(directions);
var stage_directions = ([44, 49, 114, 140, 209, 217, 249, 257, 265, 277, 305, 334, 358, 381, 398, 409, 440...
// Rest of the code remains unchanged
// ...
</svg>
});
I am facing an issue with implementing two tooltips in my chart that pull information from different sections of the JSON data. The tooltips are defined by the following variables:
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d, i) {return console.log(d.line_text) + "<strong>(" + d.starting_line + ")</strong> <i>" +.......});
var stage_tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d, i) {return console.log(d.direction_text) + "<strong>(" + d.line_after + ") s.d.</strong>......
These tooltips are integrated within bars for both items and directions:
var stage_bars = svg.selectAll(".stage_bar")
.data(directions)
.enter()
.append("rect")
// Code for stage_bars tooltip
var bars = svg.selectAll(".bar")
.data(items)
.enter()
.append("rect")
// Code for bars tooltip
The tooltip associated with "bars" works properly, but the one linked to "stage_bars" doesn't trigger. I suspect the problem might be due to using the same class for both tip and stage_tip despite renaming it differently. My question is whether having two functioning tooltips is achievable and, if so, how this can be implemented effectively.