Question

我需要在svg上动态绘制文本框但是我收到错误因为getScreenCTM不是函数所以可以解决方案

adapter.notifyDataSetChanged()

因为它是鼠标事件，所以它只能在桌面上运行，所以ipad touch事件的解决方案可以使用这个逻辑吗

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;
}

Answer 1

默认情况下，您的浏览器可能不支持getScreenCTM()。有关在本地启用它的方法，请参阅here;有关本地使用的示例，请参阅here。

对于触摸事件，您从evt回调中获得的结果略有不同。逻辑很好，但坐标不存储在evt.clientX/Y中，它们存储在evt.touches[0].clientX/Y中。

Answer 2

D3 v5 遇到相同的问题

已更改来自

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

收件人

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

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

Answer 3

如果某人正在使用D3 V5 +版本，则可以执行以下操作。从GitHub https://github.com/Caged/d3-tip/issues/231#issuecomment-459758872

中的这篇文章引用

.on('mouseover', (d, i, n) => tip.show(d, n[i]))

svg.getScreenCTM不是函数？

3 个答案: