javascript - 从 csv 文件获取 D3 中的桑基图-6ren

javascript - 从 csv 文件获取 D3 中的桑基图

转载作者：行者123 更新时间：2023-11-28 01:44:42

我正在尝试从 csv 文件创建 Sankey 图。我正在利用 timelyportfolio 提供的代码，以及 d3 站点的代码(甚至是示例 csv 文件)。然而，当我尝试在 Chrome 中运行代码时，我得到一个空白的 Html 页面，表明代码崩溃了。我尝试将源代码重定向到桌面上的文件，但仍然遇到相同的问题。 (我正在使用 Windows XP 的计算机上工作)

我已粘贴以下代码:

    <!DOCTYPE html>
    <meta charset="utf-8">
    <title>SANKEY Experiment</title>
    <style>

    .node rect {
      cursor: move;
      fill-opacity: .9;
      shape-rendering: crispEdges;
    }

    .node text {
      pointer-events: none;
      text-shadow: 0 1px 0 #fff;
    }

    .link {
      fill: none;
      stroke: #000;
      stroke-opacity: .2;
    }

    .link:hover {
      stroke-opacity: .5;
    }

    </style>
    <body>

    <p id="chart">

    <script src="http://d3js.org/d3.v3.js"></script>
    <script src="C:\Documents and Settings\jennifer.ducz\Desktop\sankey.js"></script>
    <script>

    var units = "Units";

    var margin = {top: 10, right: 10, bottom: 10, left: 10},
        width = 1400 - margin.left - margin.right,
        height = 740 - margin.top - margin.bottom;

    var formatNumber = d3.format(",.0f"),    // zero decimal places
        format = function(d) { return formatNumber(d) + " " + units; },
        color = d3.scale.category20();

    // append the svg canvas to the page
    var svg = d3.select("#chart").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform", 
              "translate(" + margin.left + "," + margin.top + ")");

    // Set the sankey diagram properties
    var sankey = d3.sankey()
        .nodeWidth(36)
        .nodePadding(10)
        .size([width, height]);

    var path = sankey.link();

    // load the data with d3.csv instead of d3.json
    //for another much simpler example uncomment the below
    d3.csv("C:\Documents and Settings\jennifer.ducz\Desktop\sankey.csv", function(error, data) {
    //d3.csv("d3noob_energy.csv", function(error, data) {
            //set up graph in same style as original example but empty
            graph = {"nodes" : [], "links" : []};

                    data.forEach(function (d) {
                        graph.nodes.push({ "name": d.source });
                        graph.nodes.push({ "name": d.target });

                        graph.links.push({ "source": d.source, "target": d.target, "value": +d.value });
                    });

                    //thanks Mike Bostock https://groups.google.com/d/msg/d3-js/pl297cFtIQk/Eso4q_eBu1IJ
                    //this handy little function returns only the distinct / unique nodes
                    graph.nodes = d3.keys(d3.nest()
                             .key(function (d) { return d.name; })
                             .map(graph.nodes));

                    //it appears d3 with force layout wants a numeric source and target
                    //so loop through each link replacing the text with its index from node
                    graph.links.forEach(function (d, i) {
                        graph.links[i].source = graph.nodes.indexOf(graph.links[i].source);
                        graph.links[i].target = graph.nodes.indexOf(graph.links[i].target);
                    });

                    //now loop through each nodes to make nodes an array of objects rather than an array of strings
                    graph.nodes.forEach(function (d, i) {
                        graph.nodes[i] = { "name": d };
                    });

      sankey
          .nodes(graph.nodes)
          .links(graph.links)
          .layout(32);

    // add in the links
      var link = svg.append("g").selectAll(".link")
          .data(graph.links)
        .enter().append("path")
          .attr("class", "link")
          .attr("d", path)
          .style("stroke-width", function(d) { return Math.max(1, d.dy); })
          .sort(function(a, b) { return b.dy - a.dy; });

    // add the link titles
      link.append("title")
            .text(function(d) {
            return d.source.name + " → " + 
                    d.target.name + "\n" + format(d.value); });

    // add in the nodes
      var node = svg.append("g").selectAll(".node")
          .data(graph.nodes)
        .enter().append("g")
          .attr("class", "node")
          .attr("transform", function(d) { 
              return "translate(" + d.x + "," + d.y + ")"; })
        .call(d3.behavior.drag()
          .origin(function(d) { return d; })
          .on("dragstart", function() { 
              this.parentNode.appendChild(this); })
          .on("drag", dragmove));

    // add the rectangles for the nodes
      node.append("rect")
          .attr("height", function(d) { return d.dy; })
          .attr("width", sankey.nodeWidth())
          .style("fill", function(d) { 
              return d.color = color(d.name.replace(/ .*/, "")); })
          .style("stroke", function(d) { 
              return d3.rgb(d.color).darker(2); })
        .append("title")
          .text(function(d) { 
              return d.name + "\n" + format(d.value); });

    // add in the title for the nodes
      node.append("text")
          .attr("x", -6)
          .attr("y", function(d) { return d.dy / 2; })
          .attr("dy", ".35em")
          .attr("text-anchor", "end")
          .attr("transform", null)
          .text(function(d) { return d.name; })
        .filter(function(d) { return d.x < width / 2; })
          .attr("x", 6 + sankey.nodeWidth())
          .attr("text-anchor", "start");

    // the function for moving the nodes
      function dragmove(d) {
        d3.select(this).attr("transform", 
            "translate(" + (
                   d.x = Math.max(0, Math.min(width - d.dx, d3.event.x))
                ) + "," + (
                       d.y = Math.max(0, Math.min(height - d.dy, d3.event.y))
                ) + ")");
        sankey.relayout();
        link.attr("d", path);
      }
    });

    </script>

    </body>
    </html>

如果有人可以告诉我我做错了什么，请告诉我。

编辑:这是我使用的示例数据，由 timelyportfolio 提供

source  target  value
    Barry   Elvis   2
    Frodo   Elvis   2
    Frodo   Sarah   2
    Barry   Alice   2
    Elvis   Sarah   2
    Elvis   Alice   2
    Sarah   Alice   4

最佳答案

我从来没有玩过它；然而，1)运行您的开发人员工具/控制台以准确查看哪一行导致应用程序崩溃

2)以下链接讨论格式化数据时的问题/解决方案

http://www.d3noob.org/2013/02/sankey-diagrams-description-of-d3js-code.html

关于javascript - 从 csv 文件获取 D3 中的桑基图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20476471/

文章推荐： c++ - 点燃 SqlFieldsQuery 特定键

文章推荐： javascript - Validate.js 不显示错误

文章推荐： c++ - 获取由空格分隔的未知大小的单行输入并将其存储到整数数组

文章推荐： javascript - 具有可扩展可折叠行 html 的 gridview

csv - 如何将 csv 文件读入数组并与另一个 csv 文件中的条目进行比较和替换？
我有两个 csv 文件 file1.csv 和 file2.csv。 file1.csv 包含 4 列。文件1: Header1,Header2,Header3,Header4 aaaaaaa,bb
csv - 如何测试 CSV 文件以及如何找出两个 CSV 文件之间的差异
我想知道是否有任何方法可以在导入数据库之前测试 CSV 文件？我有一个包含多列的巨大 CSV 文件，每列都有不同的数据类型和大小。如何测试生成的 CSV 文件中出现的数据是否与每列的大小一致？还有
csv - CSV 中的查找值和第二列的返回值
我正在从 SCOM 中提取服务器列表，并希望根据包含以下数据的 CSV 检查此列表: Computername,Collection Name Server01,NA - All DA Servers
csv - 如何使用 Super CSV 部分读取 CSV 文件
我有一个包含 24 列的 csv 文件。其中我只想阅读 3 列。我看到 super CSV 是一个非常强大的库，但我不知道如何部分读取 CSV。 partial reading上的链接坏了。请帮我举
csv - 如何将加特林日志文件导出到 csv
我正在尝试将加特林日志文件导出到 CSV，因为我需要更新 google 电子表格中的所有全局值，因为我的经理需要电子表格中的值。最佳答案此 CSV 文件被删除并替换为 JSON 文件，名为 glo
csv - csv 是结构化数据还是半结构化数据？
我对 csv 是结构化数据还是半结构化数据感到困惑。就像 RDBMS 是一个有关系的结构化数据，但 csv 没有关系。我无法找到确切的答案。最佳答案我可以说，具有恒定列和行(二维)的 CSV
csv - 使用 pipes-csv 从 csv 文件中读取第一行
我正在使用 pipes-csv 库读取一个 csv 文件。我想先读第一行，然后再读其余的。不幸的是，在 Pipes.Prelude.head 函数返回之后。管道正在以某种方式关闭。有没有办法先读取 c
csv - CSV 文件中空行的含义
起初这似乎很明显，但现在我不太确定。如果 CSV 文件具有以下行: a, 我会将其解释为具有值“a”和“”的两个字段。但是然后查看一个空行，我可以很容易地争辩说它表示一个值为“”的字段。我接受文件
csv - 将列表字典写入 csv
我正在尝试将列表字典写入 CSV 文件。我希望这些键是 CSV 文件的标题，以及与该键关联的列中的每个键关联的值。如果我的字典是: {'600': [321.4, 123.5, 564.1, 764
csv - 将数组导出为 CSV
关闭。这个问题是off-topic .它目前不接受答案。想改进这个问题吗？ Update the question所以它是on-topic用于堆栈溢出。关闭 10 年前。 Improve thi
csv - CSV 文件可以有注释吗？
是否有任何官方方法允许 CSV 格式的文件允许评论，无论是在其自己的行上还是在行尾？我尝试检查wikipedia关于此以及RFC 4180但两者都没有提到任何让我相信它不是文件格式的一部分的内容，所
csv - 如何从字符串中读取 CSV？
我有一些 csv 格式的数据。然而它们已经是一个字符串，因为我是从 HTTP 请求中获取它们的。我想使用数据框来查看数据。但是我不知道如何解析它，因为 CSV 包只接受文件，而不接受字符串。一种解决
csv - CSV 文件中的值列表应该使用哪个分隔符？
我有一个 CSV 文件，其中包含一些字段的值列表。它们作为 HTML“ul”元素存储在数据库中，但我想将它们转换为对电子表格更友好的东西。我应该使用什么作为分隔符？我可以使用转义的逗号、竖线、分号或
csv - 如何使用管道分隔符导出到 .csv
我使用 Google 表格(电子表格)来合并我的 Gambio 商店的不同来源的文章数据。要导入数据，我需要在 .csv 文件中使用管道符号作为分隔符/分隔符，并使用 "作为文本分隔符。在用于导出为
csv - 报表生成器导出到带有列标题空间的 CSV
这是一个奇怪的请求，因为我们都知道数据库头不应该包含空格。但是，我正在使用的系统需要在其标题中使用空格才能导入。我创建了一个 Report Builder 报告，它将数据构建到一个表中，并在我运行
csv - 当其中一个值可能在字符串中包含逗号时处理 .CSV
我有一个 .csv 文件，我需要将其转换为 coldfusion 查询。我使用了 cflib.org CSVtoQuery 方法，它工作正常......但是...... 如果 csv 中的“单元格”在
csv - 文化独立 CSV
我想知道是否有任何方法可以生成文化中性 CSV 文件，或者至少指定文件中存在的特定列的数据格式。例如，我生成了包含带小数点分隔符 (.) 的数字的 CSV 文件，然后将其传递给小数点分隔符为 (,
Javascript:如果 CSV 中没有，则将值添加到 CSV - 如果已经在 CSV 中 - 从 CSV 中删除
我正在构建一个 CSV 字符串 - 因此用户单击 div 的所有内容 - 5 个字符的字符串都会传递到隐藏字段中 - 我想做的是附加每个新值并创建一个 CSV 字符串 - 完成后- 在文本框中显示 -
Linux CSV - 将 CSV 文件中的列添加到另一个 CSV 文件
我正在努力从另外两个文件创建一个 CSV 文件这是我需要的我想要的文件(很多其他行) “AB”；“A”；“B”；“C”；“D”；“E” 我拥有的文件: 文件 1:"A";"B";"C";"D";"
csv - 将包含带引号的值的表导出到配置单元中的本地 csv
我正在尝试将表导出到配置单元中的本地 csv 文件。 INSERT OVERWRITE LOCAL DIRECTORY '/home/sofia/temp.csv' ROW FORMAT DELIMI

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 从 csv 文件获取 D3 中的桑基图