I'm using the D3 and lasso libraries to visualize data/make it interactive. Currently, I'm trying to log the name of the teams to the console once selected. But instead, I'm being returned the selected.map is not a function error. I've checked this SO post, but it doesn't help me out nor does the comments really explain why I'm getting the error.
var data = [["Arsenal",-0.0032967741593940836, 0.30399753945657115],["Chelsea", 0.2752159801936051, -0.0389675484210763], ["Liverpool",-0.005096951348655329, 0.026678627680541075], ["Manchester City",-0.004715381791104284, -0.12338379196523988], ["Manchester United",0.06877966010653305, -0.0850615090351779], ["Tottenham",-0.3379518099485709, -0.09933664174939877]];
var selectedTeams = [];
const colours = d3.scaleOrdinal()
.domain(data)
.range(["#F8B195", "#F67280", "#C06C84", "#6C5B7B", "#355C7D", "#2A363B"]);
var canvasW = 675;
var canvasH = 600;
var w = 365;
var h = 365;
var xPadding = 30;
var yPadding = 20;
var padding = 10;
var border = 0.5;
var bordercolor = 'black';
var xScale = d3.scaleLinear()
.range([xPadding, w - padding])
.domain([-1, 1]);
var yScale = d3.scaleLinear()
.range([h - yPadding, padding])
.domain([-1, 1]);
var svg = d3.select('body')
.append("svg")
.attr('width', canvasW)
.attr('height', canvasH);
var circles = svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("r", 7)
.attr("cx", function(d) { return xScale(d[1]); })
.attr("cy", function(d) { return yScale(d[2]); })
.attr("fill", function(d) {
var result = null;
if (data.indexOf(d) >= 0) {
result = colours(d);
} else {
result = "white";
}
return result;
});
var lasso_start = function() {
lasso.items()
.attr("r",7)
.classed("not_possible",true)
.classed("selected",false);
};
var lasso_draw = function() {
lasso.possibleItems()
.classed("not_possible",false)
.classed("possible",true);
lasso.notPossibleItems()
.classed("not_possible",true)
.classed("possible",false);
};
var lasso_end = function() {
lasso.items()
.classed("not_possible",false)
.classed("possible",false);
lasso.selectedItems()
.classed("selected", true)
.attr("r", 13);
var selected = lasso.selectedItems().filter(function(d) {
return d.selected === true;
})
var selectedDots = selected.map(d=>d.id);
selectedTeams.slice(0, selectedTeams.length);
selectedTeams.push(selectedDots);
console.log(selectedTeams)
lasso.items().filter(function(d) {
return d.selected ===false
})
.classed({"not_possible":false,"possible":false})
.attr("r",7);
};
var area = svg.append("rect")
.attr("width", w)
.attr("height", h)
.style("opacity", 0);
var lasso = d3.lasso()
.closePathSelect(true)
.closePathDistance(100)
.items(circles)
.targetArea(area)
.on("start",lasso_start)
.on("draw",lasso_draw)
.on("end",lasso_end);
svg.call(lasso);
lasso.items(d3.selectAll("circles"));
selectedis a d3 selection, which is not an array, it doesn't have a map method. If you want to use the data belonging to a selection you can use theselection.data()method, this will return the bound data as an array if the method isn't supplied with any parameters:This should explain the error:
selected.map is not a functionsince D3 selections don't have a map method.However, you have a different issue that also needs to be addressed: your selection is empty, and thus there is no bound data to retrieve. You can see this by using
console.log(selection.size()),I'm not familiar with this implementation of a d3 lasso, but it appears you can create the selection of selected circles with:
As your bound data doesn't include a property indicating if a node is selected (
d.selected) your existing approach does not work (the filter condition is never true). Also, using.filteron a selection returns a new selection, not an array.Assuming I understand the goal, and using the above two points, here's a lasso that shows the selected teams names:
There are other changes here to create a minimal example while addressing unrelated issues with the code (
d3.selectAll('circles')(lasso.itemsdoesn't need to be updated either), other code that usesd.selected, and how I map the names and log them).I'm using a version of the lasso from an answer you linked to on one of your previous questions, if it is incorrect or otherwise incompatible with the version you are using, please indicate so and I will update.