javascript - 将函数绑定(bind)到 SVG 元素

Question

在我的 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 ??

Answer 1

我不太确定您运行的是哪个 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)

<小时/>

编辑:提示

如果发生超过最大更新深度 - 错误，通常是在渲染时调用的回调函数，它本身会触发新的渲染(而不是向下传递)。