使用 d3.js 选择 svg 的最后一个路径答案

【问题标题】：Selecting last path of svg with d3.js使用 d3.js 选择 svg 的最后一个路径
【发布时间】：2017-05-30 15:15:23
【问题描述】：

我是 D3.js 的新手，我想构建一个实时协作黑板。一个管理员客户端在 svg 上绘制路径，其他客户端接收它们。我正在尝试从客户端选择最后一个路径元素。在过去的几个小时里，我四处走动，找到了几个 How can I select :last-child in d3.js? 的帖子，但无法让它发挥作用。当我问：

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

我画了两条路径

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>

提前致谢

【问题讨论】：

标签： d3.js

【解决方案1】：

你尝试过这样的事情吗？

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

您应该能够在 d3 selection api 中使用像 :last-child 这样的字符串。

【讨论】：

无论我画了多少条路径，我都会得到 svg ={"_groups":[[{}]],"_parents":[{}]}。我认为唯一的解决方案是在 svg.select("path") 返回第一个元素的情况下反转 svg 上的路径元素。但这不是一个优雅的解决方案
hmm ...当你console.log(d3.select('svg').node())时会发生什么？
有趣。你确定你的页面上有一个 svg 元素吗？
我可以在 Web Console 检查器 (Firefox) 上清楚地看到它
很奇怪。我将您的 svg 元素放入 sample codepen 并能够选择最后一个路径并将其记录到控制台...

【解决方案2】：

彼得的answer 正在工作。

您会得到一个{"_groups":[[{}]],"_parents":[{}]}，正如您在your comment 中所说的那样，因为这是一个D3 选择，这是预期的对象。

如果要获取 DOM 元素，只需使用 node() 函数即可：

const lastPath = d3.select('svg>path:last-child').node();
//getting the DOM element -------------------------^

这是一个使用 SVG 的演示，它将记录最后一个空路径（因为 S.O. sn-ps freeze — 至少在我的机器上，使用 Chrome — 在尝试记录 D3 选择时，here is a fiddle使用相同的代码）：

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

<script src="https://d3js.org/d3.v4.min.js"></script>
<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>

【讨论】：

【解决方案3】：

这就是为我解决这个问题的方法。根据d3.selections docs，这是你应该做的：

var lastPath = d3.selectAll('svg>path').filter(':last-child');

【讨论】：