Javascript 使用d3笔刷选择折线图中的元素

我是一个初学者，当我试图在折线图中选择一些元素时遇到了一个问题。 我知道精英太多了，所以我来这里寻求帮助： 我在中找到一个笔刷演示和一个线条图抱歉，他们不允许我插入2个链接，因为我没有10个声誉演示，然后我编写代码：

/* 13. 使用CSS的基本样式*/ /*通过删除填充并应用笔划来设置线的样式*/ .线路{ 填充：无； 行程：ffab00； 笔画宽度：3； } /*通过指定填充和笔划来设置点的样式*/ 多特先生{ 填充：1:40； 行程：fff； } .dot.已选定{ 笔画：红色； } // 2. 使用保证金惯例惯例 var margin={顶部：20，右侧：50，底部：20，左侧：50} ，width=window.innerWidth-margin.left-margin.right//使用窗口的宽度 ，height=window.innerHeight-margin.top-margin.bottom；//利用窗户的高度 //数据点的数量 var n=21； // 5. X标度将使用我们数据的索引 var xScale=d3.scaleLinear .domain[0，n-1]//输入 .范围[0，宽度]；//输出 // 6. Y刻度将使用随机生成的数字 var yScale=d3.scaleLinear .domain[0，1]//输入 .范围[高度，0]；//输出 // 7. d3线发生器 var line=d3.line .xFunction，i{return xScalei；}//设置行生成器的x值 .yFunction{return yScaled.y；}//为线路生成器设置y值 .curved3.curveMonotoneX；//对直线应用平滑 // 8. 长度为N的对象数组。每个对象都有键->值对，键为y，值为随机数 var dataset=d3.rangen.mapfunctiond{return{y:d3.randomUniform1}； // 1. 将SVG添加到页面并使用2 var svg=d3.selectbody.appendsvg .attrwidth，width+margin.left+margin.right .attrhight，height+margin.top+margin.bottom .附录 .attransform，translate+margin.left+，+margin.top+； // 3. 调用组标记中的x轴 svg.appendg .attrclass，x轴 .attrtransform，translate0，+高度+ .calld3.axisBottomxScale；//使用d3.axisBottom创建轴组件 // 4. 调用组标记中的y轴 svg.appendg .属性类，y轴 .calld3.axisLeftyScale；//使用d3.axisLeft创建轴组件 // 9. 追加路径、绑定数据并调用行生成器 svg.appendpath .datumdataset//10。将数据绑定到行 .attrclass，line//为样式指定一个类 .attrd，第行；//11调用线路生成器 // 12. 为每个数据点追加一个圆圈 var dot=svg.appendg .attrclass，点//为样式指定一个类 .选择All.dot .数据集 .enter.appendcircle//使用enter.append方法 attrr先生，5岁 .attrcx，函数d，i{return xScalei} .attracy，函数d{return yScaled.y}； var brush=svg.appendg .画笔 .呼叫3.刷子 .范围[[0,0]，[宽度，高度]] .开始刷端，刷过； 功能刷{ 风险值选择=d3.event.selection； dot.classedselected，selection&函数d{ 返回选择[0][0]按如下方式重写已刷过的函数：

function brushed() {
    var selection = d3.event.selection;

    dot.classed("selected", selection && function(d,i) {
        return selection[0][0] <= xScale(i) && xScale(i) < selection[1][0]
            && selection[0][1] <= yScale(d.y) && yScale(d.y) < selection[1][1];
    });
}

/*13.使用CSS的基本样式*/ /*通过删除填充并应用笔划来设置线的样式*/ .线路{ 填充：无； 行程：ffab00； 笔画宽度：3； } /*通过指定填充和笔划来设置点的样式*/ 多特先生{ 填充：1fab40； 行程：fff； } .dot.已选定{ 笔画：红色； }

---

谢谢！！你太好了我很抱歉再次打扰你，现在我可以选择我需要的点，但它们都是SVG的坐标，我真正需要的是真实的数据，我如何才能得到它们？@lomo我重写了代码片段，以获得我的答案，看看它。注意getSelectedDots函数，我在d3.brush的结束事件上附加了它。现在，在每次选择之后，所选点的数据对象数组出现在控制台上。