d3.js - 基于d3的数据可视化库有交互好用的吗？

Question

目前想要的效果是根据数据绘制散点图，鼠标框选得到选中的数据
纯d3的案例:
https://observablehq.com/@d3/brushable-scatterplot-matrix

但d3太复杂了，看了几个库: vega-lite，Observable Plot，没找到交互方面的介绍，有推荐吗？
谢谢

Answer 1

基于D3的数据可视化库有很多，而且大部分都提供了很好的交互性。你提到的几个库（Vega-Lite、Observable Plot）确实没有提供与D3相同的灵活性，但它们也都有自己的优点和特色。

如果你希望有更强大的交互性，我推荐你可以考虑使用Plotly.js这个库。Plotly.js是一个基于纯JavaScript的可视化图表库，能够生成交互式的散点图、线图、条形图、饼图等。它提供了丰富的交互特性，例如数据选择、图例控制、动画效果等。

对于你的需求（根据数据绘制散点图，鼠标框选得到选中的数据），Plotly.js可以通过添加"lasso"（用于选择多个点）或"select"（用于选择单个点）交互模式来实现。

下面是一个简单的Plotly.js散点图示例，其中包含了鼠标框选功能：

// 创建数据var x = [1, 2, 3, 4, 5];var y = [10, 20, 30, 40, 50];var trace = {x: x, y: y, type: 'scatter'};// 创建图形布局var layout = {  xaxis: {title: 'X'},  yaxis: {title: 'Y'},  lasso: {show: true}  // 开启鼠标框选功能};// 创建图形对象var figure = {data: [trace], layout: layout};// 显示图形Plotly.show(figure);

你可以在Plotly的官方文档中找到更多关于交互特性的详细信息，以及如何根据你的具体需求进行定制。