Question

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

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

使用D3无需使用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
});

使用D3进行DOM操作有优势吗？

1 个答案: