在我的 ReactJS
应用程序中,我有一些像这样的 SVG 形状;
function clipData(svg, cx, cy) {
var clip = svg.append("defs")
.append("clipPath") // define a clip path
.attr("id", "clip") // give the clipPath an ID
.append("circle") // shape it as an ellipse
.attr("id", "my-circle")
.attr("cx", 100) // position the x-centre
.attr("cy", 80) // position the y-centre
.attr("r", 80) // set the x radius
.attr("fill", "yellow")
svg.append("circle") // shape it as an ellipse
.attr("cx", 100) // position the x-centre
.attr("cy", 80) // position the y-centre
.attr("r", 80) // set the x radius
.attr("fill", "red")
var g = svg.append("g")
.datum({
x: 0,
y: 0
})
.attr("id", "child")
//.attr("transform", function(d) { return 'translate(' + d.x + ' '+ d.y + ')'; })
.call(d3.drag()
.on("start", function(d) {
d3.select(this).raise().classed("active", true);
})
.on("drag", function(d) {
d3.select(this).attr("transform", "translate(" + (d3.event.x) + "," + (d3.event.y) + ")");
d3.select("#svgGreen").selectAll("*").remove();
clipData(svg, d3.event.x + cx, d3.event.y + cy);
})
.on("end", function(d) {
d3.select(this).classed("active", false);
}));
g.append("line")
.attr("clip-path", "url(#clip)")
.attr("x1", cx)
.attr("y1", cy)
.attr("x2", cx + 100)
.attr("y2", cy + 100)
.style("stroke", "purple")
.style("stroke-width", 12)
}
var svg = d3.select("#svgGreen");
var cx = 100,
cy = 80,
x = 0,
y = 0;
clipData(svg, cx, cy);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" className="clip-path" id="svgGreen">
</svg>
现在我想用这个 svg 绑定(bind)一个函数,当我做这样的事情时,它将如何更新一些状态;
svg.call(functionName(Params))
它开始重新渲染组件,最后应用程序因此错误而崩溃
我什至尝试过这个;
svg.call(() => { // write all code here })
还有这个;
svg.call(() => functionName(params))
所有这些都导致应用程序崩溃。
Can someone guide me what should I do to avoid this crash ??
最佳答案
我不太确定您运行的是哪个 call
函数,但我在 d3.js 上找到的所有函数甚至 JavaScript Function.call
( MDN , D3-Selection )方法具有以下类似的语法:
// from MDN
function.call(thisArg, arg1, arg2, ...)
// d3 Selection.call
selection.call(function[, arguments…])
我猜您运行的是 D3 函数,因此您必须放入函数定义/引用,而不是在内部调用它。
而不是:
svg.call(functionName(Params))
只需引用它并在后面设置你的参数:
svg.call(functionName, Params)
// maybe with a bind
svg.call(functionName.bind(thisValue), Params)
<小时/>
编辑:提示
如果发生超过最大更新深度
- 错误,通常是在渲染时调用的回调函数,它本身会触发新的渲染(而不是向下传递)。
关于javascript - 将函数绑定(bind)到 SVG 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58541807/