`
haoningabc
  • 浏览: 1482914 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

D3 的3d图

js 
阅读更多
LCF

http://mathworld.wolfram.com/LCFNotation.html



http://selection.datavisualization.ch/

地图
http://kartograph.org/
http://kartograph.org/showcase/italia/


3d
http://bl.ocks.org/1703449 

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>Cubic Hamiltonian Graphs from LCF Notation</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.min.js"></script>
    <script type="text/javascript" src="http://jcaret.googlecode.com/files/jquery.caret.1.02.min.js"></script>
    <link rel="stylesheet" href="http://current.bootstrapcdn.com/bootstrap-v204/css/bootstrap.min.css">
    <style type="text/css">
body {
  margin-left: 10px;
}
circle {
  stroke: #999;
  stroke-opacity: .5;
}
.link {
  stroke: #999;
}
    </style>
  </head>
  <body>
  <div class="row">
    <div class="span3">
      <div class="form" style="background-color:white">
        <label for="lcfCodes">Preset LCF Codes</label>
        <select id="lcfCodes">
          <option></option>
          <option value="[2]4">Tetrahedral graph</option>
          <option value="[3]6">Utility graph</option>
          <option value="[3,-3]4">Cubical graph</option>
          <option value="[4]8">Wagner graph</option>
          <option value="[6,4,-4]4">Bidiakis cube</option>
          <option value="[5,-5]6">Franklin graph</option>
          <option value="[-5,-2,-4,2,5,-2,2,5,-2,-5,4,2]">Frucht graph</option>
          <option value="[2,6,-2]4">Truncated tetrahedral graph</option>
          <option value="[5,-5]7">Heawood graph</option>
          <option value="[5,-5]8">Mobius-Kantor graph</option>
          <option value="[5,7,-7,7,-7,-5]3">Pappus graph</option>
          <option value="[5,-5,9,-9]5">Desargues graph</option>
          <option value="[10,7,4,-4,-7,10,-4,7,-7,4]2">Dodecahedral graph</option>
          <option value="[12,7,-7]8">McGee graph</option>
          <option value="[2,9,-2,2,-9,-2]4">Truncated cubical graph</option>
          <option value="[3,-7,7,-3]6">Truncated octahedral graph</option>
          <option value="[5,-9,7,-7,9,-5]4">Nauru graph</option>
          <option value="[-7, 7]13">F26A graph</option>
          <option value="[-13,-9,7,-7,9,13]5">Tutte–Coxeter graph</option>
          <option value="[5,-5,13,-13]8">Dyck graph</option>
          <option value="[-25,7,-7,13,-13,25]9">Gray graph</option>
          <option value="[30, -2, 2, 21, -2, 2, 12, -2, 2, -12, -2, 2, -21, -2, 2, 30, -2, 2, -12, -2, 2, 21, -2, 2, -21, -2, 2, 12, -2, 2]2">Truncated dodecahedral graph</option>
          <option value="[-29,-19,-13,13,21,-27,27,33,-13,13,19,-21,-33,29]5">Harries graph</option>
          <option value="[9, 25, 31, -17, 17, 33, 9, -29, -15, -9, 9, 25, -25, 29, 17, -9, 9, -27, 35, -9, 9, -17, 21, 27, -29, -9, -25, 13, 19, -9, -33, -17, 19, -31, 27, 11, -25, 29, -33, 13, -13, 21, -29, -21, 25, 9, -11, -19, 29, 9, -27, -19, -13, -35, -9, 9, 17, 25, -9, 9, 27, -27, -21, 15, -9, 29, -29, 33, -9, -25]">Harries–Wong graph</option>
          <option value="[-9, -25, -19, 29, 13, 35, -13, -29, 19, 25, 9, -29, 29, 17, 33, 21, 9,-13, -31, -9, 25, 17, 9, -31, 27, -9, 17, -19, -29, 27, -17, -9, -29, 33, -25,25, -21, 17, -17, 29, 35, -29, 17, -17, 21, -25, 25, -33, 29, 9, 17, -27, 29, 19, -17, 9, -27, 31, -9, -17, -25, 9, 31, 13, -9, -21, -33, -17, -29, 29]">Balaban 10-cage</option>
          <option value="[17,-9,37,-37,9,-17]15">Foster graph</option>
          <option value="[16, 24, -38, 17, 34, 48, -19, 41, -35, 47, -20, 34, -36, 21, 14, 48, -16, -36, -43, 28, -17, 21, 29, -43, 46, -24, 28, -38, -14, -50, -45, 21, 8, 27, -21, 20, -37, 39, -34, -44, -8, 38, -21, 25, 15, -34, 18, -28, -41, 36, 8, -29, -21, -48, -28, -20, -47, 14, -8, -15, -27, 38, 24, -48, -18, 25, 38, 31, -25, 24, -46, -14, 28, 11, 21, 35, -39, 43, 36, -38, 14, 50, 43, 36, -11, -36, -24, 45, 8, 19, -25, 38, 20, -24, -14, -21, -8, 44, -31, -38, -28, 37]">Biggs-Smith graph</option>
          <option value="[44, 26, -47, -15, 35, -39, 11, -27, 38, -37, 43, 14, 28, 51, -29, -16, 41, -11, -26, 15, 22, -51, -35, 36, 52, -14, -33, -26, -46, 52, 26, 16, 43, 33, -15, 17, -53, 23, -42, -35, -28, 30, -22, 45, -44, 16, -38, -16, 50, -55, 20, 28, -17, -43, 47, 34, -26, -41, 11, -36, -23, -16, 41, 17, -51, 26, -33, 47, 17, -11, -20, -30, 21, 29, 36, -43, -52, 10, 39, -28, -17, -52, 51, 26, 37, -17, 10, -10, -45, -34, 17, -26, 27, -21, 46, 53, -10, 29, -50, 35, 15, -47, -29, -41, 26, 33, 55, -17, 42, -26, -36, 16]">Balaban 11-cage</option>
          <option value="[47, -23, -31, 39, 25, -21, -31, -41, 25, 15, 29, -41, -19, 15, -49, 33, 39, -35, -21, 17, -33, 49, 41, 31, -15, -29, 41, 31, -15, -25, 21, 31, -51, -25, 23, 9, -17, 51, 35, -29, 21, -51, -39, 33, -9, -51, 51, -47, -33, 19, 51, -21, 29, 21, -31, -39]2">Ljubljana graph</option>
          <option value="[17, 27, -13, -59, -35, 35, -11, 13, -53, 53, -27, 21, 57, 11, -21, -57, 59, -17]7">Tutte 12-cage</option>
        </select>

        <label for="lcfCode">LCF Code <sup><small>[<a href="http://mathworld.wolfram.com/LCFNotation.html" target="_blank">Wolfram MathWorld</a>]</small></sup></label>
        <textarea id="lcfCode" value="" rows="3"></textarea>

        <label for="animationSpeed">Animation Speed</label>
        <select id="animationSpeed">
          <option value="0">No Animation</option>
          <option value="1">Fast</option>
          <option value="100">Slow</option>
          <option value="1000">Slowest</option>
        </select>

        <label for="lockVertices">
          <input type="checkbox" id="lockVertices" /> Lock Vertices to Circumference
        </label>
       
        <button id="redraw" class="btn btn-primary">
          <i class="icon-repeat icon-white"></i>
          Redraw
        </button>
      </div>

      <div style="position:absolute;bottom:0;z-index:-1">
        <label for="permalink">Permalink</label>
        <div class="input">
          <textarea id="permalink" disabled="disabled" rows="10" style="color:black"></textarea>
        </div>
       </div>
    </div>
    <div class="row-fluid">
      <div class="span9" id="chart"></div>
    </div>
  </div>
    <script type="text/javascript">
        //http://stackoverflow.com/a/901144/678708
        function getParameterByName(name) {
          name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
          var regexS = "[\\?&]" + name + "=([^&#]*)";
          var regex = new RegExp(regexS);
          var results = regex.exec(parent.window.location.href);
          if(results == null)
            return "";
          else
            return decodeURIComponent(results[1].replace(/\+/g, " "));
        }

        function lcfCodeToVerticesAndStepsArrayAndNumRepeats(lcfCode) {
            lcfCode = lcfCode.replace(/ /g,"").replace(/−/g,"-")
            var steps = lcfCode.match(/\[(.*?)\]/)[1]
            if(steps=="") {
                steps = []
            }else{
                steps = steps.split(',').filter(Number)
            }
            var numRepeats = parseInt(lcfCode.split(']')[1]) || 0
            return [steps.length * (numRepeats || 1), steps, numRepeats]
        }

        function getLcfChords(numVertices, stepsArray, numRepeats){
            var numSteps = stepsArray.length;
            if(numRepeats < 0) throw "Repeats must be positive"
            if(numSteps < 1) throw "Must have at least one step"

            var numChords = numSteps*numRepeats,
                chords = [];

            for(var chord=1; chord<=numChords; chord++){
                chords.push({source: chord % numVertices, target: (numVertices+chord+stepsArray[chord % numSteps]) % numVertices});
            }

            return chords;
        }

var w = $(window).width() - 230,
    h = $(window).height() - 5,
    rcx = w/2,
    rcy = h/2,
    radius = 245,
    numVertices = 0,
    colors = d3.scale.category10().range(),
    //the node with index 0 is fixed to the center and has a high charge
    nodes = [],
    links = [],
    lcfStepsAndRepeats = [],
    stepsArray = [],
    lcfChords,
    animationSpeed = 0,
    interval = null,
    lockVertices = true;

function draw(numVertices, stepsArray, numRepeats){
    clearInterval(interval)
    lcfChords = getLcfChords(numVertices, stepsArray, numRepeats)
    if(lcfChords.length > 500){
        if(!confirm('More than 500 chords will be drawn. Continue?')) return
    }
    links = []
    nodes = [{fixed: true, x: w/2, y:h/2}].concat(d3.range(numVertices).map(function(d, i) { return {x:rcx+radius*Math.cos((i*2*Math.PI/numVertices) - Math.PI/2), y:rcy+radius*Math.sin((i*2*Math.PI/numVertices) - Math.PI/2)}; }))

    nodes.slice(1).forEach(function(target, i) {
        var node = nodes[i == nodes.length - 2 ? 1 : i+2],
            x = target.x - node.x,
            y = target.y - node.y;
        links.push({source: node, target: target, linkDistance:0});
    });

    var currentVertex = 0
    var currentVertexOffset = 0
    function animateLcf() {
        var stepInstruction = stepsArray[currentVertex % stepsArray.length]
        var currentStep = (currentVertex + currentVertexOffset) - numVertices * Math.floor((currentVertex + currentVertexOffset) / numVertices)
        if(currentVertexOffset == 0){
            svg.selectAll("circle").filter(function(d,i){return currentVertex == currentStep}).style("fill", colors[1])
            svg.selectAll("circle").filter(function(d,i){return currentVertex > i}).style("fill",colors[0])
            svg.selectAll("circle").filter(function(d,i){return currentVertex < i}).style("fill","white")
            currentVertexOffset += (stepInstruction > 0 ? 1 : -1);
        }else if(currentVertexOffset != stepInstruction){
            svg.selectAll("circle").filter(function(d,i){return currentStep == i}).style("fill",colors[1])
            currentVertexOffset += (stepInstruction > 0 ? 1 : -1)
        }else{
            svg.selectAll("circle").filter(function(d,i){return currentStep == i}).style("fill",colors[1])
            links.push({source: nodes.slice(1)[currentVertex], target: nodes.slice(1)[currentStep]});
            drawLines()
            currentVertex++
            currentVertexOffset = 0;
        }
        if(currentVertex != numVertices){
            if($("#animationSpeed").val() == 0){
                animateLcf()
            }else{
                interval = setTimeout(animateLcf, $("#animationSpeed").val())
            }
        } else {
            interval = null
            svg.selectAll("circle").style("fill",colors[0])
        }

        if(!lockVertices) {
            force.links(links)
            force.start()
        }
    }

    force.nodes(nodes)
    force.start()
    drawLines()
    drawCircles()
    if($("#animationSpeed").val() == 0){
        animateLcf()
    }else{
        interval = setTimeout(animateLcf, $("#animationSpeed").val())
    }
}

function getValuesAndDraw(){
    savePermalink();
    lcfStepsAndRepeats = lcfCodeToVerticesAndStepsArrayAndNumRepeats($("#lcfCode").val())
    draw(lcfStepsAndRepeats[0], lcfStepsAndRepeats[1], lcfStepsAndRepeats[2])
}

var force = d3.layout.force()
    .charge(function(d, i) { return lockVertices ? (i ? -1 : -6000) : (i ? -100 : 0) })
    .size([w, h]);

var svg = d3.select("#chart").append("svg:svg")
    .attr("width", w)
    .attr("height", h);

$("#lcfCodes").bind('change keyup', function(){
    $("#lcfCode").val($(this).val());
    getValuesAndDraw();
})

$("#lcfCode").bind('keydown mousewheel', function(e){
    if (event.which == 38 || event.which == 40 || event.type == 'mousewheel') {
        e.preventDefault();
        val = $(this).val();
        cursorIndex = $(this).caret().start;
        cursorString = [val.slice(0, cursorIndex), 'CURSOR', val.slice(cursorIndex)].join('');
        re = /(-?\d*)CURSOR\s*(-?\d*)/g
        matches = re.exec(cursorString);
        result = parseInt(matches[1] + matches[2]) + (event.which == 40 || event.wheelDelta < 0 ? -1 : 1);
        if(!isNaN(result)){
            $(this).val(cursorString.replace(re, result));
        }
        $(this).caret(matches.index, matches.index);
    }
    if($.inArray(e.keyCode, [9, 17, 18, 32, 37, 39, 188]) == -1) {
        getValuesAndDraw();
    }
});

$("#animationSpeed").change(function(){
    getValuesAndDraw();
})

$("#lockVertices").change(function(){
    lockVertices = $(this).is(":checked")
    getValuesAndDraw()
})

$("#redraw").click(getValuesAndDraw)

function setDefaultValues(){
    $("#lockVertices").attr('checked', parseInt(getParameterByName('lockVertices')) != 1 ?  null : 'checked')
    lockVertices = $("#lockVertices").is(":checked")
    $("#animationSpeed").val(getParameterByName('animationSpeed') == '' ? 1 : getParameterByName('animationSpeed'))
    var urlLcfCode = getParameterByName('lcfCode')
    if(urlLcfCode){
        $("#lcfCode").val(urlLcfCode)
        getValuesAndDraw();
    }else{
        $("#lcfCodes").val("[30, -2, 2, 21, -2, 2, 12, -2, 2, -12, -2, 2, -21, -2, 2, 30, -2, 2, -12, -2, 2, 21, -2, 2, -21, -2, 2, 12, -2, 2]2").trigger("change")
    }
}

function savePermalink(){
    $("#permalink").val(window.parent.location.origin + window.parent.location.pathname + "?lcfCode="+$("#lcfCode").val()+"&animationSpeed="+$("#animationSpeed").val()+"&lockVertices="+($("#lockVertices").is(":checked")?'1':'0'))
}

setDefaultValues();

function drawCircles() {
    circles = svg.selectAll("circle")
        .data(nodes.slice(1))
    circles.enter()
        .append("svg:circle")
        .attr("r", 5)
        .style("fill", "white")
        .text(function(d, i){return i})
        .call(force.drag);
    circles.exit().remove();
}
function drawLines(){
    lines = svg.selectAll("line.link")
        .data(links)
    lines.enter().insert("svg:line", "circle.node")
        .attr("class", "link")
        .attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; })
        .attr("drawn", 1);
    lines.exit().remove()
}

force.on("tick", function(e) {
    svg.selectAll("circle")
       .attr("cx", function(d) { return d.x; })
       .attr("cy", function(d) { return d.y; });

    svg.selectAll("line.link")
       .attr("x1", function(d) { return d.source.x; })
       .attr("y1", function(d) { return d.source.y; })
       .attr("x2", function(d) { return d.target.x; })
       .attr("y2", function(d) { return d.target.y; });
});
    </script>
  </body>
</html>
  • 大小: 7.2 KB
分享到：
| 转 dtrace简介
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    C# WPF 3D图像特效 Introduction to D3DImage

    这个教程“C# WPF 3D图像特效 Introduction to D3DImage”会深入讲解如何利用Direct3D和WPF的`D3DImage`类来创建引人入胜的3D视觉效果。 首先，我们需要理解`D3DImage`类的作用。`D3DImage`是WPF与Direct3D交互的...

    3D-d3-force-3d.zip

    3D-d3-force-3d.zip,使用速度verlet积分在1d、2d或3d中强制定向图形布局。,3D建模使用专门的软件来创建物理对象的数字模型。它是3D计算机图形的一个方面，用于视频游戏，3D打印和VR，以及其他应用程序。

    d3threejs使用D3和THREEjs实现的CSS3D变换

    结合D3和THREE.js，我们可以利用CSS3D变换来对2D数据进行深度处理，如将折线图转化为3D曲线，或将柱状图转换为3D柱状结构。 在使用d3-threejs库之前，确保你已经熟悉D3和THREE.js的基本用法。然后，你需要引入d3-...

    react-利用d3js绘制漂亮的React3D饼状图

    在这个场景下，结合D3.js（Data-Driven Documents）和React可以创建出动态且交互式的3D饼状图。D3.js是一个强大的JavaScript库，它允许开发者绑定任意数据到DOM，并根据数据操作DOM来更新视图。React则是一个用于...

    unity3d opengl d3d显示demo

    在Unity3D中，开发者可以利用内置的图形渲染系统或者通过插件来实现自定义的图形渲染，比如使用OpenGL和Direct3D（简称D3D）这两个主流的图形API。OpenGL是一个开放源码、跨平台的图形库，而D3D是微软Windows平台上...

    高仿d3.js官网照片墙

    - **绑定数据**：将加载到的数据绑定到图片元素上，通常使用`d3.selectAll()`或`d3.select()`选择元素，然后用`.data()`方法进行数据绑定。 - **创建元素**：如果需要，根据数据创建新的图片元素。D3的`.enter()`...

    3D-d3-octree.zip

    《3D-d3-octree.zip：探索三维空间的精细划分——基于d3.js的八叉树实现》 在数字化的世界里，3D建模已经成为技术领域的关键组成部分，广泛应用于视频游戏、3D打印、虚拟现实（VR）等多个领域。3D-d3-octree.zip这...

    论坛求助~如何用D3D的精灵接口显示图片

    在Direct3D（简称D3D）编程中，精灵（Sprite）是一种常用的技术，用于高效地绘制2D图像。在你的问题中，你遇到了使用D3D精灵接口显示图片时遇到的问题，即图片无法正确显示，但你确认数据已经被正确读取。这可能是...

    地球D3示例

    在"地球D3示例"中，我们看到的是一个3D地球的模拟，这通常涉及到地理信息可视化。D3库虽然主要处理2D图形，但通过巧妙的技巧和SVG的组合，可以实现3D效果。在这个例子中，可能使用了旋转、缩放和投影等技术来模拟...

    D3dHook.rar_D3Dhook C++_HookD3Ddll_XW1_c# hook d3d_d3dhook插件

    标题中的"D3dHook.rar"表明这是一个关于Direct3D钩子（D3D Hook）的资源，其中包含了一个名为"D3dHook.dll"的动态链接库文件。D3Dhook是一个用于修改或拦截Direct3D图形接口的工具，通常由程序员使用以实现特定的...

    d3.js插件 拓扑图 动态增加、删除节点

    首先，我们需要引入d3.js库和相关的拓扑图插件，如d3拓扑图或d3网络图等。这些插件提供了预定义的图形元素和交互行为，简化了开发过程。 在创建拓扑图时，我们需要定义以下几个关键组成部分： 1. **数据模型**：...

    3D-d3-x3d.zip

    《3D-d3-x3d.zip：探索3D数据可视化的新维度》 在现代的数据分析与可视化领域，3D技术的应用越来越广泛，特别是在d3.js（Data-Driven Documents）这样的强大JavaScript库的加持下，我们可以将复杂的数据转化为直观...

    d3d11renderers.rar

    Direct3D 11（简称D3D11）是微软推出的一种强大的图形应用程序接口（API），用于开发高性能的3D图形应用，广泛应用于游戏开发、可视化设计等领域。在C++中，D3D11提供了一套丰富的函数和类，帮助开发者实现复杂的...

    windows mft d3d11渲染显示 播放器

    本话题主要探讨如何使用Direct3D 11（D3D11）作为渲染引擎来构建一个播放器应用。 Direct3D 11是微软开发的图形应用程序接口（API），用于高效地处理游戏、视频和其他图形密集型应用的渲染。D3D11提供了比其前代更...

    D3DXCreateText.rar_ D3DXCreateText_D3DXCreateText_Directx3d

    在DirectX 3D中，`D3DXCreateText`是一个非常实用的函数，用于创建3D文本对象，它允许开发者在3D场景中显示文本信息。 `D3DXCreateText` 函数的基本用法是这样的： ```cpp LPD3DXMESH pMesh = NULL; D3...

    D3D11直接渲染YUV

    在计算机图形学领域，D3D11，全称Direct3D 11，是Microsoft开发的一个图形应用程序接口（API），用于处理3D图形和游戏编程。它属于Windows API的一部分，为开发者提供了强大的硬件加速功能，包括对现代GPU的充分利用...

    D3.Js-JQuery 3D插件

    例如，使用D3.js可以轻松创建线图、柱状图、饼图、散点图等常见图表。同时，通过SVG，开发者还可以构建矢量图形图标，这些图标在任何分辨率下都能保持清晰，非常适合响应式设计。 在提供的压缩包文件中，`d3.v3.js`...

    使用d3vue开发的Topo图

    本项目聚焦于使用d3vue结合Vue.js来开发Topo图，这是一种常用于展示网络拓扑结构、系统架构或者地理分布等复杂关系的图表。 首先，我们要理解什么是d3vue。d3vue是D3.js库与Vue.js框架的一个桥梁，它允许开发者将D3...

    VC6 Direct3D 最简单的D3D程序

    这个最简单的D3D程序可能是初学者入门的起点，帮助理解Direct3D的基本概念和编程模型。 首先，我们需要了解Direct3D的核心概念。Direct3D提供了一种方式，让程序员可以与计算机的图形硬件进行交互，以提高图形渲染...

    vue+d3实现的拓扑图，可拖拽

    在这个项目中，“vue+d3实现的拓扑图，可拖拽”意味着结合了Vue.js的组件化和D3.js的数据绑定能力，创建了一个可以互动的拓扑图，用户可以自由地拖动节点。 首先，让我们详细了解一下Vue.js。Vue.js的核心特性包括...

Magicbox
Global site tag (gtag.js) - Google Analytics