svg.getScreenCTM 不是函数？

Question

我需要在 svg 上动态绘制文本框，但出现错误，因为 getScreenCTM 不是函数，所以解决方案是什么

var mousedownonelement = false;

window.getlocalmousecoord = function (svg, evt) {

    editor.x = evt.clientX;
    editor.y = evt.clientY;
    var localpoint = editor.matrixTransform(svg.getScreenCTM().inverse());
    localpoint.x = Math.round(localpoint.x);
    localpoint.y = Math.round(localpoint.y);
    return localpoint;
};

window.createtext = function (localpoint, svg) {
    var myforeign = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')
    var textdiv = document.createElement("div");
    var textnode = document.createTextNode("type the text.....");
    textdiv.appendChild(textnode);
    textdiv.setAttribute("contentEditable", "true");
    textdiv.setAttribute("width", "auto");
    myforeign.setAttribute("width", "100%");
    myforeign.setAttribute("height", "100%");
    myforeign.classList.add("foreign"); 
    textdiv.classList.add("insideforeign"); 
    textdiv.addEventListener("mousedown", elementMousedown, false);
    myforeign.setAttributeNS(null, "transform", "translate(" + localpoint.x + " " + localpoint.y + ")");
    svg.appendChild(myforeign);
    myforeign.appendChild(textdiv);

};

function elementMousedown(evt) {
    alert("elementMousedown");
    mousedownonelement = true;
}

因为它是鼠标事件，所以它只适用于桌面，所以 ipad 触摸事件的解决方案可以使这个逻辑起作用

$('#calloutbox').click(function (evt) {
    var svg = document.getElementById('canvas');
    alert(svg);
    var localpoint = getlocalmousecoord(svg, evt);
    if (!mousedownonelement) {
        createtext(localpoint, svg);
    } else {
        mousedownonelement = false;
    }
});

Answer 1

与 D3 v5 有同样的问题

改变了来自

.on("mouseover",function(d) { tip.show(d)})

给

.on("mouseover",function(d) { tip.show(d, this)})

d3Tip 自动解析 i 的值，无需显式传递。有关详细信息，请参阅此 thread