使用D3有DOM操作的优势吗？ [关闭]

Question

我有一些使用HTML <canvas>元素绘制地图的Javascript代码。我想到了使用D3，但现在我注意到我仅将其用于DOM操作，因为实际绘图是由canvas API的函数执行的。例如，要创建一个简单的HTML滑块，我可以使用：

let slider = d3.select('body').append('input')
    .attr('type', 'range')
    .attr('min', 0)
    .attr('max', 100);

如果没有使用D3，可以实现同样的目的：

let slider = document.createElement('INPUT');
    slider.setAttribute('type', 'range');
    slider.setAttribute('min', 0);
    slider.setAttribute('max', 100);

document.body.appendChild(slider);

我正在考虑在整个文档中用纯javascript替换所有DOM操作，但也许使用D3有一些我现在没有看到的优点。此外，如果我想将一个事件处理程序附加到该滑块，如slider.oninput = updateFunction;，这似乎仅适用于纯JS，因为到目前为止我没有找到在D3方式中传递e参数的方法。

Answer 1

虽然这可能有点基于意见。如果你正在使用D3只是为了一些DOM操作，你可能最好只使用常规JS。除非你使用更多的update enter append动态生成流，否则可能没什么需要。它只是你的用户必须下载的另一个~70kb的JS。与d3事件处理程序和获得事件一样，here是一个方便的指南。基本上d3事件使用d3.event中的传统DOM事件对象获取数据元素和索引。

d3.select('div').on('click', function(d, i) {
  // d is the elements data point if you have bound data
  const e = d3.event // d3 binds the event into d3.event
});