使用 Javascript 创建带有 D3. js 的交互式数据可视化

线性尺度示例:

const xScale = d3.scaleLinear()
 .domain([0, d3.max(data)])
 .range([0, width]);

const yScale = d3.scaleLinear()
 .domain([0, d3.max(data)])
 .range([height, 0]);

const xAxis = d3.axisBottom(xScale);
svg.append("g")
 .attr("transform", `translate(0, ${height})`)
 .call(xAxis);

与 D3. js 建立交互式视觉

交互将静态图表转换为可扩展的故事。 D3 支持事件处理器、 转换和动态更新。 您可以添加工具提示、 缩放、 拖放、 过滤和动画, 并且最小的上方。 下面我们扩展工具提示并引入其他常见的交互功能 。

工具提示和突出显示

工具提示提供了悬浮的精确数据值。 使用 D3 事件系统, 您可以创建一个显示细节的浮动 [[ FLT: 9] 。 例如, 带工具提示的列图扩展在原始代码中已经显示; 在此我们还添加了 [ [ [ FLT: 0]] 颜色变化 [[ [FLT: 1]] :

svg.selectAll("rect")
 .data(data)
 .enter()
 .append("rect")
 .attr("x", (d, i) => i * 70)
 .attr("y", d => height - d * 3)
 .attr("width", 50)
 .attr("height", d => d * 3)
 .attr("fill", "steelblue")
 .on("mouseover", function(event, d) {
 d3.select(this).attr("fill", "orange");
 tooltip.style("display", "block").text(`Value: ${d}`);
 })
 .on("mousemove", (event) => {
 tooltip.style("left", (event.pageX + 10) + "px")
 .style("top", (event.pageY - 20) + "px");
 })
 .on("mouseout", function() {
 d3.select(this).attr("fill", "steelblue");
 tooltip.style("display", "none");
 });

缩放和泛

对于大型数据集或时间序列数据,缩放和平面帮助用户聚焦于感兴趣的区域. D3's ]的行为会改变坐标系统。应用到包含您视觉元素的SVG组中.

const zoom = d3.zoom()
 .scaleExtent([1, 10])
 .on("zoom", (event) => {
 g.attr("transform", event.transform);
 });

svg.call(zoom);

动态数据更新

交互式仪表板通常需要刷新数据而不重新加载页面. D3 更新模式优雅地处理添加,删除,修改元素. 关键是重新运行与新数据的结合,并使用 的额外节点.

function updateData(newData) {
 const circles = svg.selectAll("circle").data(newData);
 circles.exit().remove(); // remove old
 circles.enter().append("circle") // add new
 .merge(circles) // merge with existing
 .attr("cx", (d, i) => i * 100 + 50)
 .attr("cy", 100)
 .attr("r", d => d);
}

高级 D3 技术

版图和地理可视化

D3 包括用于复杂图表的专门布局模块: 创建派/射线数据, 模拟物理用于网络图表, ] 项目地图数据使用 GeoJSON。 这些模块大幅削减了精密可视化所需的代码。 例如,创建了强制引导的网络 :

const simulation = d3.forceSimulation(nodes)
 .force("link", d3.forceLink(links))
 .force("charge", d3.forceManyBody())
 .force("center", d3.forceCenter(width / 2, height / 2));

过渡和动画

平滑的转换可以改善用户体验。 D3 的 [[FLT: 19]] 动画会随时间变化而改变属性。 您可以控制持续时间、 放松和延迟。 例如, 动画条会增长 :

svg.selectAll("rect")
 .data(data)
 .enter()
 .append("rect")
 .attr("x", (d, i) => i * 70)
 .attr("y", height)
 .attr("width", 50)
 .attr("height", 0)
 .attr("fill", "steelblue")
 .transition()
 .duration(800)
 .ease(d3.easeBounce)
 .attr("y", d => height - d * 3)
 .attr("height", d => d * 3);

生产最佳做法-准备D3

性能优化

对于大型数据集(千点),直接DOM操作变得缓慢. 使用canvas[]通过D3-canvas或考虑]与jacle.gl等库进行渲染.gl. WebGL[. 对于基于SVG的视觉,通过使用组来降低DOM的复杂性,并避免在每个帧上更新每个元素. 使用[debunted 事件处理器和缓存选择器.

function resize() {
 const width = container.node().getBoundingClientRect().width;
 svg.attr("width", width)
 .attr("height", width * aspectRatio);
 // redraw scales and axes
}
window.addEventListener("resize", resize);

const brush = d3.brush()
 .extent([[0, 0], [width, height]])
 .on("brush end", brushed);

svg.append("g").call(brush);

function brushed(event) {
 if (event.selection) {
 const [[x0, y0], [x1, y1]] = event.selection;
 circles.classed("selected", d =>
 x0 <= xScale(d.x) && xScale(d.x) <= x1 &&
 y0 <= yScale(d.y) && yScale(d.y) <= y1
 );
 } else {
 circles.classed("selected", false);
 }
}