Javascript D3 不显示可视化-6ren

Javascript D3 不显示可视化

转载作者：行者123 更新时间：2023-12-03 00:42:37

我正在尝试复制我在此 github 个人资料上看到的可视化

https://github.com/mojoaxel/d3-sunburst/tree/master/examples

我复制了以下代码并更改了各个文件的路径。

suburst.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Sequences sunburst</title>
    <link rel="stylesheet" type="text/css" href="sunburst.css"/>
    <link rel="stylesheet" type="text/css" href="examples.css"/>
    <script src="http://d3js.org/d3.v3.min.js" type="text/javascript"></script>
    <script src="sunburst.js" type="text/javascript"></script>
  </head>
  <body>
    <div id="main">
      <div id="sunburst-breadcrumbs"></div>
      <div id="sunburst-chart">
        <div id="sunburst-description"></div>
      </div>
    </div>
    <div id="sidebar">
      <input type="checkbox" id="togglelegend"> Legend<br/>
      <div id="sunburst-legend" style="visibility: hidden;"></div>
    </div>

    <script type="text/javascript">
      (function() {
        var sunburst = new Sunburst({
          colors: {
            "home": "#5687d1",
            "product": "#7b615c",
            "search": "#de783b",
            "account": "#6ab975",
            "other": "#a173d1",
            "end": "#bbbbbb"
          }
        });
        sunburst.loadCsv("/Users/Documents/data/visit-sequences.csv");
        d3.select("#togglelegend").on("click", function() {
          var legend = d3.select('#sunburst-legend');
          if (legend.style("visibility") == "hidden") {
            legend.style("visibility", "");
          } else {
            legend.style("visibility", "hidden");
          }
        });
      })();
    </script>

  </body>
</html>

sunburst.js

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    define(['d3'], factory);
  } else {
    root.Sunburst = factory(root.d3);
  }
}(this, function (d3) {

  var defaultOptions = {
    // DOM Selectors
    selectors: {
      breadcrumbs:  '#sunburst-breadcrumbs',
      chart:        '#sunburst-chart',
      description:  '#sunburst-description',
      legend:       '#sunburst-legend'
    },

    // Dimensions of sunburst.
    width: 750,
    height: 600,

    // Mapping of step names to colors.
    colors: {},

    // If a color-name is missing this color-scale is used
    colorScale: d3.scale.category20(),
    colorScaleLength: 20,

    // Breadcrumb dimensions: width, height, spacing, width of tip/tail.
    breadcrumbs: {
      w: 75,
      h: 30,
      s: 3,
      t: 10
    },

    // parser settings
    separator: '-'
  };

  /**
   * This hashing function returns a number between 0 and 4294967295 (inclusive) from the given string.
   * @see https://github.com/darkskyapp/string-hash
   * @param {String} str 
   */
  function hash(str) {
    var hash = 5381;
    var i = str.length;
    while(i) {
      hash = (hash * 33) ^ str.charCodeAt(--i);
    }
    return hash >>> 0;
  }

  var Sunburst = function(options, data) {
    this.opt = Object.assign({}, defaultOptions, options);

    // Total size of all segments; we set this later, after loading the data.
    this.totalSize = 0;

    if (data) {
      this.setData(data);
    }
  }

  Sunburst.prototype.getColorByName = function(name) {
    return this.opt.colors[name] || this.opt.colorScale(hash(name) % this.opt.colorScaleLength);
  }

  Sunburst.prototype.setData = function(data) {
    var json = this.buildHierarchy(data);
    this.createVisualization(json);
  }

  Sunburst.prototype.loadCsv = function(csvFile) {
    // Use d3.text and d3.csv.parseRows so that we do not need to have a header
    // row, and can receive the csv as an array of arrays.
    d3.text(csvFile, function(text) {
      var array = d3.csv.parseRows(text);
      var json = this.buildHierarchy(array);
      this.createVisualization(json);
    }.bind(this));
  }

  // Main function to draw and set up the visualization, once we have the data.
  Sunburst.prototype.createVisualization = function(json) {
    var that = this;
    var radius = Math.min(this.opt.width, this.opt.height) / 2


    this.vis = d3.select(this.opt.selectors.chart).append("svg:svg")
      .attr("width", this.opt.width)
      .attr("height", this.opt.height)
      .append("svg:g")
      .attr("id", "sunburst-container")
      .attr("transform", "translate(" + this.opt.width / 2 + "," + this.opt.height / 2 + ")");

    var arc = d3.svg.arc()
      .startAngle(function(d) { return d.x; })
      .endAngle(function(d) { return d.x + d.dx; })
      .innerRadius(function(d) { return Math.sqrt(d.y); })
      .outerRadius(function(d) { return Math.sqrt(d.y + d.dy); });

    var partition = d3.layout.partition()
      .size([2 * Math.PI, radius * radius])
      .value(function(d) { return d.size; });

    // Basic setup of page elements.
    this.initializeBreadcrumbTrail();
    this.drawLegend();

    // For efficiency, filter nodes to keep only those large enough to see.
    var nodes = partition.nodes(json)
      .filter(function(d) {
        return (d.dx > 0.005); // 0.005 radians = 0.29 degrees
      });

    var all = this.vis.data([json])
      .selectAll("path")
      .data(nodes)
      .enter();

    all.append("svg:path")
      .attr("display", function(d) { return d.depth ? null : "none"; })
      .attr("d", arc)
      .attr("fill-rule", "evenodd")
      .style("fill", function(d) { return that.getColorByName(d.name); })
      .style("opacity", 1)
      .on("mouseover", that.mouseover.bind(this));

    // some tests with text
    /*
    var arcText = d3.svg.arc()
      .startAngle(function(d) { return d.x; })
      .endAngle(function(d) { return d.x + d.dx; })
      .innerRadius(function(d) { return Math.sqrt(d.y * 0.4); })
      .outerRadius(function(d) { return Math.sqrt(d.y + d.dy * 0.4); })
    var arcsText = arcs.append("svg:path")
      .attr("d", arcText)
      .style("fill", "none")
      .attr("id", function(d, i){
        return "s" + i;
      });
    var texts = all.append("svg:text")
      .attr("dx", "0")
      .attr("dy", "0")
      .style("text-anchor","middle")
      .append("textPath")
      .attr("xlink:href", function(d, i){
        return "#s" + i;
      })
      .attr("startOffset",function(d,i){return "25%";})
      .text(function (d) {
        return d.depth === 1 ? d.name : '';
      });
    */

    // Add the mouseleave handler to the bounding circle.
    d3.select(this.opt.selectors.chart).on("mouseleave", that.mouseleave.bind(this));

    // Get total size of the tree = value of root node from partition.
    var node =  all.node();
    this.totalSize = node ? node.__data__.value : 0;
  }

  // Fade all but the current sequence, and show it in the breadcrumb trail.
  Sunburst.prototype.mouseover = function(d) {

    var percentage = (100 * d.value / this.totalSize).toPrecision(3);
    var sequenceArray = this.getAncestors(d);

    this.updateDescription(sequenceArray, d.value, percentage)
    this.updateBreadcrumbs(sequenceArray, d.value, percentage);

    // Fade all the segments.
    this.vis.selectAll("path")
      .style("opacity", 0.3);

      // Then highlight only those that are an ancestor of the current segment.
    this.vis.selectAll("path")
      .filter(function(node) {
        return (sequenceArray.indexOf(node) >= 0);
      })
      .style("opacity", 1);
  }

  // Restore everything to full opacity when moving off the visualization.
  Sunburst.prototype.mouseleave = function(d) {
    var that = this;

    // Hide the breadcrumb trail
    d3.select("#trail")
      .style("visibility", "hidden");

    // Deactivate all segments during transition.
    d3.selectAll("path").on("mouseover", null);

    // Transition each segment to full opacity and then reactivate it.
    //TODO cancel this transition on mouseover
    d3.selectAll("path")
      .transition()
      .duration(1000)
      .style("opacity", 1)
      .each("end", function() {
        d3.select(this).on("mouseover", that.mouseover.bind(that));
      });

    d3.select(this.opt.selectors.description)
      .style("visibility", "hidden");
  }

  // Given a node in a partition layout, return an array of all of its ancestor
  // nodes, highest first, but excluding the root.
  Sunburst.prototype.getAncestors = function(node) {
    var path = [];
    var current = node;
    while (current.parent) {
      path.unshift(current);
      current = current.parent;
    }
    return path;
  }

  Sunburst.prototype.initializeBreadcrumbTrail = function() {
    // Add the svg area.
    var trail = d3.select(this.opt.selectors.breadcrumbs).append("svg:svg")
      .attr("width", this.opt.width)
      .attr("height", 50)
      .attr("id", "trail");
      // Add the label at the end, for the percentage.
    trail.append("svg:text")
    .attr("id", "endlabel")
    .style("fill", "#000");
  }

  // Generate a string that describes the points of a breadcrumb polygon.
  Sunburst.prototype.breadcrumbPoints = function(d, i) {
    var points = [];
    var b = this.opt.breadcrumbs;

    points.push("0,0");
    points.push(b.w + ",0");
    points.push(b.w + b.t + "," + (b.h / 2));
    points.push(b.w + "," + b.h);
    points.push("0," + b.h);
    if (i > 0) { // Leftmost breadcrumb; don't include 6th vertex.
      points.push(b.t + "," + (b.h / 2));
    }
    return points.join(" ");
  }

  // format the description string in the middle of the chart
  Sunburst.prototype.formatDescription = function(sequence, value, percentage) {
    return percentage < 0.1 ? "< 0.1%" : percentage + '%';
  }

  Sunburst.prototype.updateDescription = function(sequence, value, percentage) {
    d3.select(this.opt.selectors.description)
      .html(this.formatDescription(sequence, value, percentage))
      .style("visibility", "");
  }

  // format the text at the end of the breadcrumbs
  Sunburst.prototype.formatBreadcrumbText = function(sequence, value, percentage) {
    return value + " (" + (percentage < 0.1 ? "< 0.1%" : percentage + "%") + ")";
  }

  // Update the breadcrumb trail to show the current sequence and percentage.
  Sunburst.prototype.updateBreadcrumbs = function(sequence, value, percentage) {
    var that = this;
    var b = this.opt.breadcrumbs;

    // Data join; key function combines name and depth (= position in sequence).
    var g = d3.select("#trail")
      .selectAll("g")
      .data(sequence, function(d) { return d.name + d.depth; });

    // Add breadcrumb and label for entering nodes.
    var entering = g.enter().append("svg:g");

    entering.append("svg:polygon")
      .attr("points", this.breadcrumbPoints.bind(that))
      .style("fill", function(d) { return that.getColorByName(d.name); });

    entering.append("svg:text")
      .attr("x", (b.w + b.t) / 2)
      .attr("y", b.h / 2)
      .attr("dy", "0.35em")
      .attr("text-anchor", "middle")
      .text(function(d) { return d.name; });

    // Set position for entering and updating nodes.
    g.attr("transform", function(d, i) {
      return "translate(" + i * (b.w + b.s) + ", 0)";
    });

    // Remove exiting nodes.
    g.exit().remove();

    // Now move and update the percentage at the end.
    d3.select("#trail").select("#endlabel")
      .attr("x", (sequence.length + 1) * (b.w + b.s))
      .attr("y", b.h / 2)
      .attr("dy", "0.35em")
      .attr("text-anchor", "middle")
      .html(this.formatBreadcrumbText(sequence, value, percentage));

    // Make the breadcrumb trail visible, if it's hidden.
    d3.select("#trail")
      .style("visibility", "");

  }

  Sunburst.prototype.drawLegend = function() {

    // Dimensions of legend item: width, height, spacing, radius of rounded rect.
    var li = {
      w: 75, h: 30, s: 3, r: 3
    };

    var legend = d3.select(this.opt.selectors.legend).append("svg:svg")
      .attr("width", li.w)
      .attr("height", d3.keys(this.opt.colors).length * (li.h + li.s));

    var g = legend.selectAll("g")
      .data(d3.entries(this.opt.colors))
      .enter().append("svg:g")
      .attr("transform", function(d, i) {
        return "translate(0," + i * (li.h + li.s) + ")";
      });

    g.append("svg:rect")
      .attr("rx", li.r)
      .attr("ry", li.r)
      .attr("width", li.w)
      .attr("height", li.h)
      .style("fill", function(d) { return d.value; });

    g.append("svg:text")
      .attr("x", li.w / 2)
      .attr("y", li.h / 2)
      .attr("dy", "0.35em")
      .attr("text-anchor", "middle")
      .text(function(d) { return d.key; });
  }

  // Take a 2-column CSV and transform it into a hierarchical structure suitable
  // for a partition layout. The first column is a sequence of step names, from
  // root to leaf, separated by hyphens. The second column is a count of how
  // often that sequence occurred.
  Sunburst.prototype.buildHierarchy = function(array) {
    var root = {"name": "root", "children": []};
    for (var i = 0; i < array.length; i++) {
      var sequence = array[i][0];
      var size = +array[i][1];
      if (isNaN(size)) { // e.g. if this is a header row
        continue;
      }
      var parts = sequence.split(this.opt.separator);
      var currentNode = root;
      for (var j = 0; j < parts.length; j++) {
        var children = currentNode["children"] || [];
        var nodeName = parts[j];
        var childNode;
        if (j + 1 < parts.length) {
          // Not yet at the end of the sequence; move down the tree.
          var foundChild = false;
          for (var k = 0; k < children.length; k++) {
            if (children[k]["name"] == nodeName) {
              childNode = children[k];
              foundChild = true;
              break;
            }
          }
          // If we don't already have a child node for this branch, create it.
          if (!foundChild) {
            childNode = {"name": nodeName, "children": []};
            children.push(childNode);
          }
          currentNode = childNode;
        } else {
          // Reached the end of the sequence; create a leaf node.
          childNode = {"name": nodeName, "size": size};
          children.push(childNode);
        }
      }
    }
    return root;
  }

  return Sunburst;
}));

所有 html、js 和 css 文件都存储在同一文件夹中。

但是当我运行它时，我得到这样的浏览器窗口，没有可视化，只有右侧的图例框。

我错过了什么？数据集是从同一 github 页面下载的。

最佳答案

只要 visit-sequences.csv 的路径正确，浏览器就会阻止其本地加载 ( see CORS )。

您可以:

通过(甚至本地)网络服务器运行它
使用 --allow-file-access-from-files 标志启动 Chrome(如果您使用的是 Chrome)

关于Javascript D3 不显示可视化，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53380654/

文章推荐： javascript - JS 警报每个 session 不播放一次

文章推荐： javascript - bulkDelete 方法未按预期工作

iOS 可视化
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。
可视化—AntVG6高亮相邻节点的两种方式
目录内置的高亮节点自定义高亮自定义高亮时保持原始颜色总结案例完整代码通过官方文档，可知高
可视化—gojs超多超实用经验分享(三)
目录 32.go.Palette 一排放两个 33.go.Palette 基本用法 34.创建自己指向自己的连线 35.设置不同的 groupTemplate 和
可视化—gojs超多超实用经验分享(四)
目录 41.监听连线拖拽结束后的事件 42.监听画布的修改事件 43.监听节点被 del 删除后回调事件(用于实现调用接口做一些真实的删除操作) 44.监听节点鼠标
python爬虫天气预报可视化
织梦初秋那是一个宜人的初秋午后，阳光透过窗户洒在书桌上，我轻轻地拂去被阳光映照出的尘屑，伸了个懒腰。哎呀，这个世界真是奇妙啊，想到什么就能用代码实现，就像笔尖上点燃的火花。思索的起点我一直对天气
python爬虫天气预报可视化
曲径通幽，古木参天时光匆匆，不经意间已是2023年的秋季。我身处在这个充满朝气和变革的时代，每天都充满了新的科技突破和创新。而当我想起曾经努力学习的Python编程语言时，心中涌动着一股热情，渴望将
Kibana 可视化 - 自定义图例标签
我有一个堆积条形图，由一个 bool 字段分割。这会导致图例显示为两种颜色(很酷!)但图例具有以下值:true 和 false。对于读者来说，什么是真或假意味着什么是没有上下文的。在这种情况下，字段
r - R中的简单马尔可夫链(可视化)
我想在 R 中做一个简单的一阶马尔可夫链。我知道有像 MCMC 这样的包，但找不到一个以图形方式显示它的包。这甚至可能吗？如果给定一个转换矩阵和一个初始状态，那将会很好，人们可以直观地看到通过马尔可夫
statistics - 可视化 - Tableau
我是 tableau 的新手，我有以下可视化，这是链接: My visualization 我的问题是我不知道如何在一个仪表板中添加多个仪表板作为选项卡。在我的可视化中，有三个仪表板“Nota tot
audio - 通过音量和BPM控制视频输入/可视化
我建立类似自动VJ程序的东西。我有2个网络摄像头发出的2个incomig视频信号和一些可视化效果(目前2个，但我想要更多)。我有一个以dB为单位的传入音频信号音量，以bpm为单位。我需要的是视频输出的
iphone - 可视化:最好的方法？
我需要可视化的东西，并想要求一些提示和教程。或者使用哪种技术(Cocos2D、OpenGL、Quartz，...) 这里有人在 iOS 设备上做过可视化吗？它是关于移动物体、褪色、粒子等等…… 任何
graph - 可视化 - 与项目值成比例的圆圈大小
我对 Graphviz 越来越熟悉，想知道是否可以生成如下所示的图表/图表(不确定你叫它什么)。如果没有，有人知道什么是好的开源框架吗？ (首选，C++，Java 或 Python)。最佳答案根据
ios - 可视化 UIStackView？
问题很简单——我真的很喜欢用 UIStackView 来组织 UI。但是，我在测试应用程序中看不到 UIStackView 边界。当 UI 元素不是预期的时候，我需要花很多时间来调试。在网上搜索，我找
c++ - 对象指针数组的内存结构(可视化)
例如，我可以通过以下方式分配内存时的情况: Position* arr1 = new Position[5]; Position 是我程序中的一个类，它描述了具有 x 和 y 值的位置点。堆栈上会有
Python NLTK 可视化
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以便用事实和引用来回答。关闭 5 年前。
xml - XSD 可视化？
我最近一直在处理许多半复杂的 XSD，我想知道:有哪些更好的工具可以处理 XML 模式？有没有图形工具？独立的或基于 Eclipse 的是理想的选择，因为我们不是 .net 商店。最佳答案我找到
可视化—AntVG6紧凑树实现节点与边动态样式、超过X条展示更多等实用小功能
通过一段时间的使用和学习，对G6有了更一步的经验，这篇博文主要从以下几个小功能着手介绍，文章最后会给出完整的demo代码。目录 1. 树图的基本布局和
点云转深度图：转化，保存，可视化
三维数据的获取方式 RGBD相机和深度图代码展示：在pcl中，把点云转为深度图，并保存和可视化三维数据的获取方式在计算机视觉和遥感领域，点云可以通过四种主要的技术获得，（1）根据图像衍生而得，
r - 可视化 iGraph 和标签对齐
代码 library(igraph) g <- graph.tree(n = 2 ^ 3 - 1, children = 2) node_labels <- c("", "Group A", "Gro
python - 可视化 DASK 任务图
我正在关注 this tutorial并创建了一个这样的图表: from dask.threaded import get from operator import add dsk = { 'x

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

Javascript D3 不显示可视化