Javascript 如何在D3图形中添加点？

我的目标是画一幅有线和点的图

我能够用缩放和画笔画线和点，但问题是，当我放大或缩小时，点不会根据缩放移动

我对D3图形比较陌生。下面是我用来绘制点的代码：

    g.selectAll(".dot")
      .data(dots)
      .enter()
      .append("circle")
      .attr("class", "dot")
      .attr("r", 3.5)
      .attr("cx", function(d) { return x(new Date(d.date)); })
      .attr("cy", function(d) { return y(d.price); })
      .on("mouseover", function(d){
        return tooltip.style("visibility", "visible").html("Expected value is: "+d.expected_value + "<br/>"  + "value : "+d.close +"<br/>"  + "deviation is: "+d.deviation_expected)
      })
      .on("mousemove", function(){return tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");})
      .on("mouseout", function(){return tooltip.style("visibility", "hidden");});

我创造了

---

请提供帮助。

我将介绍一些基本功能，这些功能在进行可视化之前必须了解。根据fiddle，您有两组数据必须在X&Y轴上绘制。例如：数据，点。此数据集的域是不同的，尽管您需要理解域和范围的概念

d3.刻度线 使用单位域[0,1]、单位范围[0,1]、默认插值器和禁用的钳制构造新的连续比例。线性尺度是连续定量数据的良好默认选择，因为它们保留比例差异。每个范围值y可以表示为域值x的函数：y=mx+b

d3.缩放时间 使用域[2000-01-01，2000-01-02]、单位范围[0,1]、默认插值器和禁用的箝位构造新的时间刻度

单个数据系列的域和范围映射 笔刷和缩放及其到比例的反转贴图 根据新的比例重新绘制绘图。 **下面的代码片段只是为了解释画笔实现，没有考虑点的比例。通过阅读文档，自己尝试映射逻辑 风险值数据=[{ 日期：2017-04-22T11:45:00.000Z， 总计：731.6047915220261， 最小值：1.876968026161938， 密钥字段：1492861500000， 最高：2.7165653705596924， 价格：1.8769680261611938， 总数：315， 平均数：2.3225548937207177， 计数：315 }, { 日期：2017-04-01T05:30:00.000Z， 总计：708.6527144908905， 最小值：1.779407262802124， 密钥字段：149102460000， 最高：2.6382412910461426， 价格：1.779407262802124， 总数：315， 平均数：2.249691157113938， 计数：315 }, { 日期：2017-03-31T02:45:00.000Z， 总数：700.1026722192764， 最低：1.8156663179397583， 密钥字段：149092830000， 最大值：2.587003469467163， 价格：1.8156663179397583， 总数：315， 平均数：2.2225481657754806， 计数：315 }, { 日期：2017-03-31T02:30:00.000Z， 总数：699.6637561321259， 最小值：1.829458117480464， 密钥字段：149092740000， 最大值：2.570822000354， 价格：1.829458117485064， 总数：315， 平均数：2.221154781371828， 计数：315 }, { 日期：2017-03-31T02:15:00.000Z， 总数：702.4780179262161， 最低：1.8524492979049683， 密钥字段：149092650000， 最大值：2.628413677215576， 价格：1.8524492979049683， 总数：315， 平均数：2.2300889457975117， 计数：315 }, { 日期：2017-03-31T02:00:00.000Z， 总计：705.038315653801， 最低：1.8353750705718994， 密钥字段：149092560000， 最高：2.604921340942383， 价格：1.8353750705718994， 总数：315， 平均数：2.2382168750914317， 计数：315 }, { 日期：2017-03-31T01:45:00.000Z， 总计：701.742298162207， 最小值：1.8062856197357178， 密钥字段：1490924700000， 最大值：2.580445051193273， 价格：1.8062856197357178， 总数：315， 平均数：2.22775327283848276， 计数：315 }, { 日期：2017-03-31T01:30:00.000Z， 总计：706.3951338529587， 最小值：1.81768548861694， 密钥字段：149092380000， 最高：2.584993600845337， 价格：1.81768548861694， 总数：315， 平均数：2.242524234453837， 计数：315 }, { 日期：2017-03-31T01:15:00.000Z， 总数：704.2638461589813， 最小值：1.7730687856674194， 密钥字段：149092290000， 最大值：2.635057449340203， 价格：1.7730687856674194， 总数：315， 平均数：2.235758241774544， 计数：315 }, { 日期：2017-03-31T01:00:00.000Z， 总计：703.4522807598114， 最小值：1.8147484064102173， 密钥字段：149092200000， 最大值：2.5720791816711426， 价格：1.8147484064102173， 总数：315， 平均数：2.233181843681941， 计数：315 }, { 日期：2017-03-31T00:45:00.000Z， 总数：706.2918384075165， 最低：1.7760894298553467， 密钥字段：149092110000， 最高：2.596073627471924， 价格：1.7760894298553467， 总数：315， 平均数：2.2421963124048143， 计数：315 }, { 日期：2017-03-31T00:30:00.000Z， 总计：707.0961575508118， 最小值：1.7756011486053467， 密钥字段：14909200000， 最大值：2.6146974563598633， 价格：1.7756011486053467， 总数：315， 平均数：2.2447497065105138， 计数：315 }, { 日期：2017-03-31T00:15:00.000Z， 总数：706.1140650510788， 最低：1.7976468801498413， 密钥字段：1490919300000， 最大值：2.6084225177764893， 价格：1.797646880148413， 总数：315， 平均数：2.2416319525431074， 计数：315 }, { 日期：2017-03-31T00:00:00.000Z， 总计：707.5575115680695， 最低：1.849 7636318206787, 密钥字段：1490918400000， 最大值：2.5975091457366943， 价格：1.84976318206787， 总数：315， 平均数：2.2462143224383158， 计数：315 }, { 日期：2017-03-30T23:45:00.000Z， 总计：707.9171552658081， 最低：1.8517450094223022， 密钥字段：149091750000， 最大值：2.5352094173431396， 价格：1.8517450094223022， 总数：315， 平均数：2.247356048462883， 计数：315 }, { 日期：2017-03-30T23:30:00.000Z， 总数：707.09266269207， 最低：1.8389506340026855， 密钥字段：1490912600000， 最大值：2.5937083330078， 价格：1.8389506340026855， 总数：315， 平均数：2.244738611720857， 计数：315 }, { 日期：2017-03-30T23:15:00.000Z， 总计：708.3666490316391， 最小值：1.861556053161621， 密钥字段：1490915700000， 最大值：2.6234216690063477， 价格：1.861556053161621， 总数：315， 平均数：2.248780127988544， 计数：315 } ] 可变点= [ { 日期：2017-04-22T11:45:00.000Z， 总计：731.6047915220261， 最小值：1.876968026161938， 密钥字段：1492861500000， 最高：2.7165653705596924， 价格：1.8769680261611938， 总数：315， 平均数：2.3225548937207177， 计数：315 }, { 日期：2017-03-31T01:45:00.000Z， 总计：701.742298162207， 最小值：1.8062856197357178， 密钥字段：1490924700000， 最大值：2.580445051193273， 价格：1.7062856197357178， 总数：315， 平均数：2.22775327283848276， 计数：315 }, { 日期：2017-03-31T01:30:00.000Z， 总计：706.3951338529587， 最小值：1.81768548861694， 密钥字段：149092380000， 最高：2.584993600845337， 价格：1.81768548861694， 总数：315， 平均数：2.242524234453837， 计数：315 }, { 日期：2017-03-28:18:00:00.000Z， 总数：728.67049741745， 最小值：1.28372898108180664， 密钥字段：149072400000， 最大值：2.70605541732788， 价格：1.3837289810180664， 总数：315， 平均数：2.3132396743411108， 计数：315 }, { 日期：2017-03-26T20:00:00.000Z， 总数：721.6712145805359， 最低：1.8257900476455688， 密钥字段：149055840000， 最大值：2.76229169845581， 价格：1.4257900476455688， 总数：315， 平均数：2.291019728827098， 计数：315 }, { 日期：2017-03-28T17:45:00.000Z， 总计：726.2018908262253， 最小值：1.8992395401000977， 密钥字段：149072310000， 最高：2.7374281883239746， 价格：1.8992395401000977， 总数：315， 平均数：2.305402828019763， 计数：315 }, { 日期：2017-03-28:17:30:00.000Z， 总数：730.83118724823， 最小值：1.8232735395431519， 密钥字段：149072200000， 最大值：2.69656085968176， 价格：1.3232735395431519， 总数：315， 平均数：2.320099007137238， 计数：315 }, { 日期：2017-03-28T17:15:00.000Z， 总计：728.1204907894135， 最低：1.8851990699768066， 密钥字段：1490721300000， 最高：2.654668092727661， 价格：1.8851990699768066， 总数：315， 平均数：2.31149366215536934， 计数：315 }, { 日期：2017-03-27T02:45:00.000Z， 总计：702.246813763428， 最小值：1.7651863098144531， 密钥字段：1490582700000， 最大值：2.6390604972839355， 价格：1.373651863098144531， 总数：315， 平均数：2.229354925004263， 计数：315 }, { 日期：2017-03-27T02:30:00.000Z， 总数：700.91379745865， 最小值：1.833404878997803， 密钥字段：1490581800000， 最大值：2.620957136154175， 价格：1.8334004878997803， 总数：315， 平均数：2.2251231681732904， 计数：315 }, { 日期：2017-03-27T02:15:00.000Z， 总数：700.9274371862411， 最低：1.8098258972167969， 密钥字段：149058000000， 最大值：2.60654483032227， 价格:1.809825897167969， 总数：315， 平均数：2.225164672579086， 计数：315 }, { 日期：2017-03-27T02:00:00.000Z， 总数：703.296327233145， 最低：1.79482743549692， 密钥字段：14905800000000， 最大值：2.549198865890503， 价格：1.7968274354692， 总数：315， 平均数：2.2326867531216332， 计数：315 }, { 日期：2017-03-27T01:45:00.000Z， 总数：700.470331192166， 最低：1.8429771661758423， 密钥字段：14905791000000， 最大值：2.518679141998291， 价格：1.348429771661758423， 总数：315， 平均数：2.223715337117513， 计数：315 }, { 日期：2017-03-27T01:30:00.000Z， 总数：7 01.4555011987686, 最低：1.7773451805114746， 密钥字段：1490578200000， 最高：2.635554790496826， 价格：1.27773451805114746， 总数：315， 平均数：2.2268428609484716， 计数：315 }, { 日期：2017-03-26T20:00:00.000Z， 总数：721.6712145805359， 最低：1.8257900476455688， 密钥字段：149055840000， 最大值：2.76229169845581， 价格：1.48257900476455688， 总数：315， 平均数：2.291019728827098， 计数：315 }, { 日期：2017-03-26T19:45:00.000Z， 总数：724.9882735013962， 最小值：1.80784010887146， 密钥字段：1490557500000， 最大值：2.6430490016937256， 价格：0.40784010887146， 总数：315， 平均数：2.30155074607607， 计数：315 }, ] var svg=d3.selectsvg， 边距={顶部：20，右侧：20，底部：110，左侧：40}， margin2={顶部：430，右侧：20，底部：30，左侧：40}， 宽度=+svg.attrwidth-margin.left-margin.right， 高度=+svg.attrheight-margin.top-margin.bottom， height2=+svg.attrhight-margin2.top-margin2.bottom； var parseDate=d3。时间解析%m/%d/%Y%H:%m； var g=svg.appendg.attrtransform，translate+margin.left+，+margin.top+； var x=d3.scaleTime.range[0，宽度]， x2=d3.刻度时间范围[0，宽度]， y=d3.刻度线范围[高度，0]， y2=d3.刻度线范围[高度2，0]， dotXScale=d3.scaleTime.range[0，宽度]， dotYScale=d3.scaleLinear.range[高度，0]； var xAxis=d3.x， xAxis2=d3.x2， yAxis=d3.0；左轴； var brush=d3.brushX .范围[[0,0]，[width，height2]] .刷端，刷过； var zoom=d3.zoom .scaleExtent[1，无穷大] .translateExtent[[0,0]，[width，height]] .范围[[0,0]，[宽度，高度]] .onzoom，缩放； var line=d3.line .xfunction d{return xnew Dated.date；} .yfunction d{return yd.price；}； 变量line2=d3.line .xfunction d{return x2new Dated.date；} .yfunction d{返回y2d.price；}； var clip=svg.appenddefs.appendsvg:clipPath .attrid，clip .appendsvg:rect .宽度，宽度 .身高，身高 .attrx，0 .attry，0； var Line_chart=svg.appendg .上课，集中注意力 .attransform，translate+margin.left+，+margin.top+ .attrclip路径，urlclip； var focus=svg.appendg .上课，集中注意力 .attransform，translate+margin.left+，+margin.top+； var context=svg.appendg .attr类、上下文 .attransform，translate+margin2.left+，+margin2.top+； x、 domaind3.extentdata，函数为{返回新的Dated.date；}； dotXScale.domaind3.extentdots，函数d{returnnew Dated.date；}； y、 域[0，d3.maxdata，函数d{返回d.price；}]； 域[0，d3.maxdots，函数d{return d.price；}]； x2.domainx.domain； y2.domainy.domain； focus.appendg .attrclass，轴-x .attrtransform，translate0，+高度+ .callxAxis； focus.appendg .attrclass，y轴 .callyAxis； 折线图路径 .datumdata .阶级，阶层 .attrd，行； context.appendpath .datumdata .阶级，阶层 .attrd，第2行； context.appendg .attrclass，轴-x .attrtransform，translate0，+height2+ .callxAxis2； context.appendg .画笔 .毛刷 .callbrush.move，x.range； svg.appendrect .类，缩放 .宽度，宽度 .身高，身高 .attransform，translate+margin.left+，+margin.top+ .callzoom； var tooltip=d3.selectbody .appenddiv .绝对位置 .stylez索引，10 .stylevisibility，隐藏 .text一个简单的工具提示； g、 选择all.dot .数据点 进来 A.附加圆 .等等，小点 .attrr，3.5 .attrcx，函数为{ //console.log'--'，xnew Dated.date 返回日期为.date的dotXScalenew； } .attracy，函数d{ //console.logyd.price； 返回dotYScaled.price； } .onmouseover，函数d{ console.logd； 返回tooltip.stylevisibility，visible.htmlExpected值为：+d.expected_值++值：+d.close++偏差为：+d.deviation_ } .onmousemove，函数{return tooltip.styletop，event.pageY-10+px.styleleft，event.pageX+10+px；} .onmouseout，函数{return tooltip.stylevisibility，hidden；}； 功能刷{ 如果d3.event.sourceEvent&&d3.event.sourceEvent.type==缩放返回；//按缩放忽略笔刷 var s=d3.event.selection | | x2.range； x、 domains.mapx2.invert，x2； dotXScale.domains.mapx2.invert，x2； Line\u chart.select.Line.attrd，Line； focus.select.axis-x.callxAxis； svg.select.zoom.callzoom.transform，d3.zoomIdentity .scalewidth/s[1]-s[0] .translate-s[0]，0； g、 选择all.dot.transition1000 .attrcx，函数d{ 返回dotXScalenew date} .attracy，函数d{ //console.logyd.price； 返回dotYScaled.price}； } 函数放大{ 如果d3.event.sourceEvent&&d3.event.sourceEvent.type==画笔返回；//忽略按画笔缩放 var t=d3.event.transform； x、 domaint.rescaleXx2.domain； Line\u chart.select.Line.attrd，Line； focus.select.axis-x.callxAxis； context.select.brush.callbrush.move，x.range.mapt.invertX，t； } 函数类型{ d、 日期=新的日期。日期； d、 价格=+d.价格； 返回d； } .线路{ 填充：无； 笔画：钢蓝； 笔画宽度：2px； } .标题{ 填充顶部：30px； } .钮扣宽度{ 高度：34px； 宽度：50px； } .行动表{ 宽度：36雷姆； } .线路{ 填充：无； 笔画：钢蓝； 笔划宽度：1.5px； } .zoom{ 光标：移动； 填充：无； 指针事件：全部； } .区域{ 填充：无； 行程：a2dced； 笔画宽度：2； 剪辑路径：urlclip； } .zoom{ 光标：移动； 填充：无； 指针事件：全部； } 矩形选择 { 填充：绿色； }