Javascript 在D3图表和react中，放大和缩小功能未按预期工作
在我的D3图表中，放大和缩小功能在D3图表中无法正常工作 它将缩放整个图形，而不仅仅是绘制的线和区域。预期行为应仅放大和缩小图表，而不是x轴和y轴 当我使用d3.zoom时使用下面的代码-Javascript 在D3图表和react中，放大和缩小功能未按预期工作,javascript,reactjs,d3.js,Javascript,Reactjs,D3.js,在我的D3图表中，放大和缩小功能在D3图表中无法正常工作 它将缩放整个图形，而不仅仅是绘制的线和区域。预期行为应仅放大和缩小图表，而不是x轴和y轴 当我使用d3.zoom时使用下面的代码- .call(d3.zoom().on("zoom", function () { svg.attr("transform", d3.event.transform) })); 但是上面的代码也会更新axis。所以我尝试添加剪辑路径并尝试使用它，但它不起作用 // A function that
.call(d3.zoom().on("zoom", function () {
svg.attr("transform", d3.event.transform)
}));
// A function that updates the chart when the user zoom and thus new boundaries are available
const updateChart = () => {
// recover the new scale
var newX = d3.event.transform.rescaleX(xScale);
var newY = d3.event.transform.rescaleY(yScale);
// update axes with these new boundaries
xAxis.call(d3.axisBottom(newX));
yAxis.call(d3.axisLeft(newY));
// update circle position
scatter
.selectAll("circle")
.attr("cx", function(d) {
return newX(d.Sepal_Length);
})
.attr("cy", function(d) {
return newY(d.Petal_Length);
});
};
var zoom = d3
.zoom()
.scaleExtent([0.5, 20]) // This control how much you can unzoom (x0.5) and zoom (x20)
.extent([[0, 0], [containerWidth, containerHeight]])
.on("zoom", updateChart);
var svg = d3
.select(this.refs.chart)
.append("svg")
.attr("width", containerWidth)
.attr("height", containerHeight)
.call(zoom);
// Create the scatter variable: where both the circles and the brush take place
var scatter = svg.append("g").attr("clip-path", "url(#clip)");
谢谢 我尝试在react之外重新制作，你必须跟随d3 zoom hierarki 绘制def 画一个剪辑 绘制要在片段内移动的项目 更新元素 缩放后，请记住比例正在更改。如果不这样做，请使用新比例更新所有元素，否则它将随着缩放而下降 风险值数据=[ { 开始时间：1567765320049， 震级：0， 震级：0， startupRunningStatus:处于同步状态 }, { 开始时间：1567851720049， 震级：0， 震级：0， startupRunningStatus:处于同步状态 }, { 开始时间：1568024520049， 震级：10级， 震级：10， startupRunningStatus:处于同步状态 }, { 开始时间：156823720049， 震级：10级， 震级：0， startupRunningStatus:不同步 }, { 起始时间：1568629320049， 震级：0， 震级：10， startupRunningStatus:不同步 }, { 开始时间：1569061320049， 震级：0， 震级：0， startupRunningStatus:处于同步状态 }, { 起始时间：1569579720049， 震级：-20， 震级：0， startupRunningStatus:不同步 }, { 起始时间：1570184520049， 震级：-20， 地震震级：-10， startupRunningStatus:不同步 }, { 起始时间：1570875049， 震级：0， 震级：0， startupRunningStatus:处于同步状态 }, { 开始时间：1571653320049， 震级：10级， 星等：-0， startupRunningStatus:不同步 }, { 开始时间：1572517320049， 震级：0， 地震震级：-10， startupRunningStatus:不同步 }, { 开始时间：1573467720049， 震级：0， 地震震级：-10， startupRunningStatus:不同步 }, { 开始时间：1574504520049， 震级：10级， 地震震级：-10， startupRunningStatus:不同步 }, { 开始时间：1575627720049， 震级：10级， 地震震级：-10， startupRunningStatus:不同步 } ]; var drawLineGraph=函数ContainerHeight，containerWidth，data，yLabel，warnLine{ //当用户缩放时更新图表的功能，因此新边界可用 var newX= const updateChart==>{ d3.选择FocusCircle。样式为“显示”、“无” //恢复新比例 newX=d3.event.transform.rescalexscale； var-newY=yScale； //使用这些新边界更新轴 d3.selectaxisX.calld3.axisBottomnewX； //d3.选择“axisY”。调用d3.axisLeftnewY； //更新圆位置 分散 .selectAllcircle .attrcx，已运行{ 如果d{ 返回newXd.startTime； } } .消耗性，功能性{ 如果d{ 返回newYd.magnity； } }; 变量line2=d3 线 .X功能{ 返回newXd.startTime； } .功能正常{ 返回newYd.0； }; var面积=d3 地区 .X功能{ 返回newXd.startTime； } .y0d{ 返回yScaled.magnity； } .Y1高度； var线=d3 线 .X功能{ 返回newXd.startTime； } .功能正常{ 返回newYd.magnity； }; svg.onmousemove，函数{ d3.选择焦点圆圈。样式为“显示”、“块” var mouse=d3.mousethis； var mouseDate=newX.invertmouse[0]； var i=bisectDatedata，mouseDate；//返回当前数据项的索引 var d0=数据[i-1]； var d1=数据[i]； 让d； //计算出哪个日期值最接近鼠标 如果类型为d1！==未定义{ d=鼠标移动时间-d0.startTime>d1.startTime-mouseDate？d1:d0； }否则{ d=d0； } div .html `${parseDated.startTime} 震级：${d.magnity}` .styleleft，d3.event.pageX+px .styletop，d3.event.pageY-28+px； var x=newXd.startTime； var y=yScaled.震级； 集中 .选择聚焦圆 .attrcx，x .消耗率，y； 集中 .选择FocusLinex .x1，x .attry1，yScaleyDomain[0] .x2，x .attry2，yScaleyDomain[1]； 集中 .选择FocusLiney .attrx1，xScalexDomain[0] .属性1，y .attrx2，xScalexDomain[1] .attry2，y； }; scatter.selectline2.attrd，line2； scatter.select.line.attrd，line； scatter.selectarea.attrd，区域； }; var zoom=d3 快速移动 .scaleExtent[0.5,20]//此控件控制可以取消缩放x0.5和缩放x20的大小 .范围[[0,0]，[containerWidth，containerHeight]] .onzoom，updateChart； var svg=d3 。选择“图表” .appendsvg .attrwidth，集装箱宽度 .高度，集装箱高度； var clip=svg .appendefs .appendSVG:clipPath .attrid，clip .appendSVG:rect .attrwidth，集装箱宽度 .集装箱高度 艾特克斯先生，50岁 .attry，0； //创建散射变量：圆和画笔同时出现的位置 var scatter=svg.appendg.attrclip-path，urlclip； var-margin={顶部：50，左侧：50，右侧：50，底部：80}； 变量高度=容器高度-margin.top-margin.bottom； 变量宽度=集装箱宽度-margin.left-margin.right； var xDomain=d3.extenddata，函数d{ 返回d.startTime； }; var yDomain=d3.extendData，函数D{ 返回d.量级； }; var xScale=d3 .斯卡莱蒂时间 .范围[0，宽度] .域域域； var yScale=d3 .鳞片线 .范围[高度，0] .域域域； var xAxis=d3.x刻度； var yAxis=d3.0；axisLeftyScale； var线=d3 线 .X功能{ 返回xScaled.startTime； } .功能正常{ 返回yScaled.magnity； }; 变量line2=d3 线 .X功能{ 返回xScaled.startTime； } .功能正常{ 返回yScaled.magnity； }; var面积=d3 地区 .X功能{ 返回xScaled.startTime； } //.x0功能{ //返回xScaled.startTime； // } //.X1D{ //返回xScaled.magnity； // } .y0d{ 返回yScaled.magnity； } .Y1高度； //.Y0高度 //.y1d{return yScaled.magnity；}； //var面积=d3 //.区域 //.x0功能{ //返回xScaled.startTime； // } //.X1D{ //返回xScaled.startTime； // } //.y0d{ //返回yScaled.magnity； // } //.y1d{ //返回yScale0； // }; //var面积=d3 //.区域 //.X功能{ //返回xScaled.startTime； // } //.y0d{ //返回yScaled.magnity； // } //.Y1YScale10； //定义工具提示的div var div=d3 .selectbody .appenddiv .attr类，工具提示 .不透明度，0； var g=散射 .附录 .attransform，translate+margin.left+，+margin.top+； var g2=svg .附录 .attransform，translate+margin.left+，+margin.top+； g、 附录路径 .datumdata .等级、面积 .attrid，区域 .attrd，区域； g、 附加 .attrclass，x轴 .attrid，axisX .attrtransform，translate0，+高度+ .callxAxis； g2.2附录G .属性类，y轴 .attrid，axisY 卡利亚克斯先生 .附录文本 .attransform，旋转-90 .attry，6岁 .attrdy，.71em .attr文本锚定，结束 .textyLabel； g、 附录路径 .datumdata .阶级，阶层 .attrd，行； g、 附录路径 .datumdata .attrclass，第2行 .attrid，第2行 .attrd，第2行； g、 selectAllcircle .数据 进来 A.附加圆 .attrcx，已运行{ 返回xScaled.startTime； } .消耗性，功能性{ 返回yScaled.magnity； } .attrr，已运行{ 如果d.startupRunningStatus==不同步{ 返回5； } } .类，圆； //图例代码 svg A.附加圆 .attrcx，40岁 .自然减员，380 attrr先生，6岁 .stylefill，1391d8； svg A.附加圆 .attrcx，40岁 .自然减员，400 attrr先生，6岁 .stylefill，红色； svg .附录文本 艾特克斯先生，60岁 attry先生，380 .text启动配置 .STYLE字体大小，15px .路线基线，中间； svg .附录文本 艾特克斯先生，60岁 attry先生，400 .text运行配置 .STYLE字体大小，15px .路线基线，中间； //焦点跟踪 var focus=g.appendg.styledisplay，无； 集中 .附录 .attrid，focusLineX .attrclass，focusLine； 集中 .附录 .attrid，focusLineY .attrclass，focusLine； 集中 A.附加圆 .attrid，focusCircle attrr先生，5岁 .attrclass，圆焦点圆； //网格线 常数make_x_轴==>{ 返回d3.xscale； }; 分散 .附录 .attr类、网格 .attrtransform，translate50，+高度+50+ 呼叫 使_x_轴 .tickSize高度，0,0 .tickFormat ; var DisectDate=d3.Disectd函数{ 返回d.startTime； }.左； var parseDate=d3。时间格式%Y-%m-%d%H:%m:%S； g、 selectAlldot .数据 进来 .appendrect .attr类，覆盖 .宽度，宽度 .身高，身高 svg.onmouseover，函数d{ 控制台。记录“ok” focus.styledisplay，空； div 过渡 .持续时间200 .不透明度，0.9； } .onmouseout，函数{ focus.styledisplay，无； div 过渡 .持续时间300 .不透明度，0； } .onmousemove，函数{ var mouse=d3.mousethis； var mouseDate=xScale.invertmouse[0]； var i=bisectDatedata，mouseDate；//返回当前数据项的索引 var d0=数据[i-1]； var d1=数据[i]； 让d； //计算出哪个日期值最接近鼠标 如果类型为d1！==未定义{ d=鼠标移动时间-d0.startTime>d1.startTime-mouseDate？d1:d0； }否则{ d=d0； } div .html `${parseDated.startTime} 震级：${d.magnity}` .styleleft，d3.event.pageX+px .styletop，d3.event.pageY-28+px； var x=xScaled.startTime； var y=yScaled.震级； 集中 .选择聚焦圆 .attrcx，x .消耗率，y； 集中 .选择FocusLinex .x1，x .attry1，yScaleyDomain[0] .x2，x .attry2，yScaleyDomain[1]； 集中 .选择FocusLiney .attrx1，xScalexDomain[0] .属性1，y .attrx2，xScalexDomain[1] .attry2，y； }; svg .appendrect .attrwidth，集装箱宽度 .集装箱高度 .stylefill，无 .stylepointer事件，所有 .callzoom； //警戒线 //如果 //警告线&& //yDomain[0]
我理解方法，但我可以看到Y轴现在没有显示。Y轴没有显示，因为它在剪辑内部绘制，剪辑以x=50开始。Y轴将被裁剪，请看我绘制剪辑时的代码，我只是编辑它并使其位于剪辑外部，对不起，我没有检查我看到的你有带值的剪辑，但它没有在任何地方使用？是的，我只是在变量上命名了它，所以我可以将它指向你，而不是程序，指向你 让你明白，我更新答案还能看到Y轴不显示吗相信我，很难向人们解释一些事情你是对的，我已经在我的react应用程序中添加了这段代码，还有一个问题是放大和缩小，如果你注意到的话，我们会在角落里看到焦点圈。