viewof selection = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height1]) .property("value", []); const brush = d3.brush() .on("start brush end", brushed); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); const dot0 = svg.append("g") .attr("fill", "none") .attr("stroke-width", 1.5) .selectAll("circle") .data(Iris) .join("circle") .attr("transform", d => `translate(${x(d.x)},${y(d.y)})`) .filter(d => d.virginica=="0") .style("stroke", "blue") .attr("r", 3); const dot1 = svg.append("g") .attr("fill", "none") .attr("stroke-width", 1.5) .selectAll("circle") .data(Iris) .join("circle") .attr("transform", d => `translate(${x(d.x)},${y(d.y)})`) .filter(d => d.virginica=="1") .style("stroke", "red") .attr("r", 3); const dot2 = svg.append("g") .attr("fill", "none") .attr("stroke-width", 1.5) .selectAll("circle") .data(Iris) .join("circle") .attr("transform", d => `translate(${x(d.x)},${y(d.y)})`) .filter(d => d.virginica=="2") .style("stroke", "green") .attr("r", 3); svg.call(brush); function brushed({selection}) { let value0 = []; let value1 = []; let value2 = []; if (selection) { const [[x0, y0], [x1, y1]] = selection; value0 = dot0 .style("stroke", "blue") .attr("stroke-opacity", 0.1) .filter(d => x0 <= x(d.x) && x(d.x) < x1 && y0 <= y(d.y) && y(d.y) < y1) .style("stroke", "blue") .attr("stroke-opacity", 1) .data(); value1 = dot1 .style("stroke", "red") .attr("stroke-opacity", 0.1) .filter(d => x0 <= x(d.x) && x(d.x) < x1 && y0 <= y(d.y) && y(d.y) < y1) .style("stroke", "red") .attr("stroke-opacity", 1) .data(); value2 = dot2 .style("stroke", "green") .attr("stroke-opacity", 0.1) .filter(d => x0 <= x(d.x) && x(d.x) < x1 && y0 <= y(d.y) && y(d.y) < y1) .style("stroke", "green") .attr("stroke-opacity", 1) .data(); } else { dot0.style("stroke", "blue").attr("stroke-opacity", 1); dot1.style("stroke", "red").attr("stroke-opacity", 1); dot2.style("stroke", "green").attr("stroke-opacity", 1); } let value_sum = []; value_sum.push.apply(value_sum,value0); value_sum.push.apply(value_sum,value1); value_sum.push.apply(value_sum,value2); value_sum.concat(value0); value0.concat(value1); value0.concat(value2); svg.property("value", value0).dispatch("input"); svg.property("value", value1).dispatch("input"); svg.property("value", value_sum).dispatch("input"); } return svg.node(); }