I'm currently facing a challenge with creating a dot-plot using javascript and the d3 library. My goal is to filter the dots that are plotted so that I can later add text fields to specific ones based on a column in the dataset labeled 'highlight'. As an initial test, I am only plotting circles that are marked 'yes', but the intention is to eventually plot all circles. Below is just the section of code responsible for plotting the circles, assuming the data structure is correct. The following code successfully plots the circles:
var category = plot.selectAll("."+media+"category")
.data(plotData)
.enter()
.append("g")
.attr("transform", function (d) {return "translate(0," + yScale(d.key) + ")"; })
.attr("class", media+"category")
.call(function(parent){
parent.append('text')
.attr("class", media+"Subtitle")
.attr("x",margin.left)
.attr("y",0)
.text(function(d){return d.key})
parent.selectAll('circles')
.data(function(d){
// Filter out circles marked as 'yes'
let filtered=d.values.filter(function(d){
return d.highlight=="yes"
})
return filtered
})
.enter()
// Code for appending circles here...
The resulting plot should look like this:
https://i.sstatic.net/BKu7r.png
However, my issue arises when I attempt to add text labels to the circles. Using the same filtering method as before to create an array for the '.data' argument, the first object is somehow excluded from being plotted. Even after revising the code as follows, the problem persists:
var category = plot.selectAll("."+media+"category")
.data(plotData)
.enter()
.append("g")
.attr("transform", function (d) {return "translate(0," + yScale(d.key) + ")"; })
.attr("class", media+"category")
.call(function(parent){
parent.append('text')
.attr("class", media+"Subtitle")
.attr("x",margin.left)
.attr("y",0)
.text(function(d){return d.key})
parent.selectAll('circles')
.data(function(d){
// Filter out circles marked as 'yes'
let filtered=d.values.filter(function(d){
return d.highlight=="yes"
})
return filtered
})
.enter()
// Code for appending circles here...
parent.selectAll('text')
.data(function(d){
// Filtering logic for text...
})
.enter()
// Code for appending text here...
The resulting plot now shows missing labels for the first circle each time:
https://i.sstatic.net/prBuF.png
It seems that no matter how many circles are defined in the dataset as 'yes', the label is consistently missing for the very first circle. Suspecting a mutation of the data somewhere, I rearranged the order of plotting text before circles, but the outcome remains unchanged.
This snippet from the console demonstrates that the '.data' array contains the initial items:
[Object, Object, Object, Object]
dot-plot.js:104 object= Object {key: "Endland", values: Array[22]}
// Other log entries detailing object contents...
If anyone has any insights on where the issue may lie, I would greatly appreciate it. Apologies for the lengthy description, but without the ability to use jsfiddle, I provided details for clarity.
Thank you!