使用d3.js选择svg的最后路径 [英] Selecting last path of svg with d3.js

问题描述

我对D3.js相当陌生，我想构建一个实时协作黑板.一个管理客户端在svg上绘制路径，其他客户端接收它们.我正在尝试从客户端选择最后一个路径元素.我走了最后几个小时，发现了几个帖子，如我该如何选择:d3.js中的最后一个孩子?，但无法使其正常工作.当我问:

I am fairly new in D3.js I want to build a real time collaborating blackboard. One admin client draw paths on svg and other clients receive them. I'm trying to pick last path element from clients side. I walked around last few hours finding several posts as How can I select :last-child in d3.js? but cannot make it work. When i ask:

 console.log('svg ='+svg.selectAll("path")

绘制了两条我得到的路径

having drawn two paths i get

svg ={"_groups":[{"0":{},"1":{}}],"_parents":[{"__on":[{"type":"click","name":"","capture":false},{"type":"mousedown","name":"drag","capture":false},{"type":"touchstart","name":"drag","capture":false},{"type":"touchmove","name":"drag","capture":false},{"type":"touchend","name":"drag","capture":false},{"type":"touchcancel","name":"drag","capture":false}]}]}  

我的DOM结构

<svg id="myCanvas" width="960" height="500">
            <rect fill="#F2EDE4" width="100%" height="100%"></rect>
        <path fill="none" stroke="black" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" d="M223.64999389648438,304.25L223.98332722981772,304.5833333333333C224.31666056315103,304.9166666666667,224.98332722981772,305.5833333333333,226.31666056315103,306.75C227.64999389648438,307.9166666666667,229.64999389648438,309.5833333333333,231.14999389648438,310.4166666666667C232.64999389648438,311.25,233.64999389648438,311.25,234.98332722981772,310.4166666666667C236.31666056315103,309.5833333333333,237.98332722981772,307.9166666666667,238.81666056315103,307.0833333333333L239.64999389648438,306.25"></path><path></path></svg>

预先感谢

推荐答案

您尝试过这种方法吗?

const lastPath = d3.select('svg>path:last-child')

您应该能够在d3选择api中使用类似:last-child的字符串.

You should be able to use a string like :last-child in the d3 selection api.

这篇关于使用d3.js选择svg的最后路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！