Javascript 将d3 svg坐标转换为画布坐标，或尝试匹配两者的相同位置

我有一些D3SVG元素，其中我将坐标x、y的列表作为属性传递，并将它们绘制在svg地图上。如以下示例所示：

var svg = iniMarker().append("g")
   .attr("data-lineData", JSON.stringify(lineData))
//Function to draw line
        var lineFunction = d3.svg.line()
            .x(function (d) { return d.x; })
            .y(function (d) { return d.y; });

生成的路径结构如下所示：

<path d="M1100,850L1180,800" class="pPath" stroke-dasharray="94.33981323242188 94.33981323242188" stroke-dashoffset="0"></path>
<path d="M1180,800L1280,800" class="pPath" stroke-dasharray="100 100" stroke-dashoffset="0"></path>
<path d="M1280,800L1380,800" class="pPath" stroke-dasharray="100 100" stroke-dashoffset="0"></path>

DataSet.map(function (m) { if(m.isActive) return m.lineData; else return []; }).forEach(f => data = data.concat(f));

            data.forEach(e => {
                //here I call another function for plot the svg coordinates as points on the canvas map 
});

我获取坐标信息的数据以以下格式存储：

var DataSet = [{
            "id": "",
            "isActive": true,
            "personId": "p1",
            "name": "test",
            "lineData": [
                { "timestamp": "2018/09/15 10:00:05 AM", "x": 1100, "y": 950 }]

现在，我需要在画布地图上精确地叠加在svg地图上，表示从这个坐标列表中获取的每个点。在这种情况下，问题在于列表的svg坐标与画布坐标的相同位置不匹配

事实上，如果我尝试使用以下函数生成一些画布坐标点：

document.getElementById("canv").onclick = function (e) {
            var localX = e.clientX - e.target.offsetLeft;
            var localY = e.clientY - e.target.offsetTop;
}

然后onclick事件中的坐标与我从数据集obj获得的svg坐标有很大的不同

实际上，为了匹配它们，我刚刚尝试在函数上传递DataSet obj，以便获得svg坐标并将其绘制在画布地图上，如下所示：

<path d="M1100,850L1180,800" class="pPath" stroke-dasharray="94.33981323242188 94.33981323242188" stroke-dashoffset="0"></path>
<path d="M1180,800L1280,800" class="pPath" stroke-dasharray="100 100" stroke-dashoffset="0"></path>
<path d="M1280,800L1380,800" class="pPath" stroke-dasharray="100 100" stroke-dashoffset="0"></path>

DataSet.map(function (m) { if(m.isActive) return m.lineData; else return []; }).forEach(f => data = data.concat(f));

            data.forEach(e => {
                //here I call another function for plot the svg coordinates as points on the canvas map 
});

但很明显，为了正确匹配，我需要首先转换它们

按照@enxaneta的建议，我需要从这些数据对象创建一个画布。但问题是，我已经拥有的坐标是svg的坐标，而不是画布格式的坐标

我需要找到一种方法来转换我拥有的svg坐标列表，以便与画布坐标系统匹配或更相似

---

我愿意接受建议。

您的问题不是很清楚，但假设您有一个svg路径，您可以使用对象将其转换为画布路径：在下一个示例中，svg路径为红色，画布路径为黑色

var svgPathApple=Apple.getAttributed； var svgPathLeaf=Leaf.getAttributed； var c=document.getElementByIdc； var ctx=c.getContext2d； var cw=c.宽度=500； var ch=c.高度=500； var apple=新路径2dsvgpathpapple； var-leaf=新路径2dsvgpathleaf； 红星苹果； ctx.strokeleaf； 画布，svg{边框：1px实心d9d9d9；宽度：45vw；} 路径{填充：无；笔划：红色；}

---

你试过d3.mouse获取坐标吗？@Raju如果你提到svg坐标，我已经有了。。如果要获取画布坐标，问题是使用target.offset函数，它们实际上是正确的。请创建一个而不仅仅是断开连接的代码和数据片段。@RobertLongson感谢您的建议。让我尝试重新创建一个最简单的工作示例，以便准确地显示svg和画布之间的坐标匹配问题。谢谢@enxaneta，如果我已经很好地理解了svg路径的坐标在我使用Path2D将svg元素路径转换为画布时的变化情况？但假设我只直接传递函数上的坐标对象参数，比如{timestamp:2018/09/15 10:00:05 AM，x:1100，y:950}。。。在这种情况下，现在是否有办法更改svg坐标x和y以与画布坐标映射系统匹配？@UgoL坐标不变。您可以绘制相同的路径，但这次是在画布上，而不是在svg上。我不知道你有什么类型的数据，我想是某种对象数组，每个对象都有一个时间戳，还有一个x和y坐标。请通过添加一个简短的数据数组示例+需要绘制的画布大小来编辑您的问题。我会尽力帮忙的。谢谢@enxaneta给我一些时间以正确的方式更新问题。我会尝试添加更多细节，特别是我需要处理的数据。我已经更新了问题。我不知道现在是否更清楚。告诉我你明白我的意思了。提前感谢。还有一个问题：画布的大小和svg的viewBox的值是多少？