d3-3d 项目教程

27 0 0

d3-3d 项目教程

d3-3dd3-3d is a powerful JavaScript library designed for 3D visualizations, specifically tailored to work seamlessly with d3.js. This library enables the projection of 3D data onto web browsers, making it an essential tool for developers interested in creating immersive and dynamic visualizations.项目地址:https://gitcode.com/gh_mirrors/d3/d3-3d

项目介绍

d3-3d 是一个强大的 JavaScript 库，专门设计用于 3D 可视化，旨在与 d3.js 无缝工作。该库能够将 3D 数据投影到网页浏览器上，是开发者创建沉浸式和动态可视化的重要工具。

项目快速启动

安装

你可以通过 npm 安装 d3-3d：

npm install d3-3d

或者通过 unpkg 获取最新版本：


<script src="https://unpkg.com/d3-3d/build/d3-3d.js"></script>
<!-- 或者使用压缩版本 -->
<script src="https://unpkg.com/d3-3d/build/d3-3d.min.js"></script>

示例代码

以下是一个简单的示例，展示如何使用 d3-3d 绘制 3D 三角形：


import { triangles3D } from 'd3-3d';
 
const data3D = [
  [
    { x: 0, y: -1, z: 0 },
    { x: -1, y: 1, z: 0 },
    { x: 1, y: 1, z: 0 }
  ]
];
 
const triangles = triangles3D()
  .scale(100)
  .origin([480, 250]);
 
const projectedData = triangles(data3D);
 
const svg = d3.select('body').append('svg')
  .attr('width', 960)
  .attr('height', 500);
 
svg.selectAll('path')
  .data(projectedData)
  .enter()
  .append('path')
  .attr('d', d => d.path)
  .attr('fill', 'blue')
  .attr('stroke', 'black');