个人中心
gpt4 book ai didi

javascript - 如何运行D3 JavaScript库创建水平图

转载 作者：行者123 更新时间：2023-12-01 14:35:32 24 4
gpt4 key购买 nike

我正在尝试运行此代码，但是一些如何引发错误，我创建了一个json文件，该文件保存在我的数据文件夹中，我正在调用此文件。反正有解决这个问题的方法吗
这是我的代码段

        <!DOCTYPE html>
        <meta charset="utf-8">
        <style>

        body {
          text-align: center;
        }

        svg {
          margin-top: 32px;
          border: 1px solid #aaa;
        }

        .person rect {
          fill: #fff;
          stroke: steelblue;
          stroke-width: 1px;
        }

        .person {
          font: 14px sans-serif;
        }

        .link {
          fill: none;
          stroke: #ccc;
          stroke-width: 1.5px;
        }

        </style>
        <body>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
        <script>

        var boxWidth = 150,
            boxHeight = 40;

        // Setup zoom and pan
        var zoom = d3.behavior.zoom()
          .scaleExtent([.1,1])
          .on('zoom', function(){
            svg.attr("transform", "translate(" + d3.event.translate + ") scale(" + d3.event.scale + ")");
          })
          // Offset so that first pan and zoom does not jump back to the origin
          .translate([150, 200]);

        var svg = d3.select("body").append("svg")
          .attr('width', 1000)
          .attr('height', 500)
          .call(zoom)
          .append('g')
          // Left padding of tree so that the whole root node is on the screen.
          // TODO: find a better way
          .attr("transform", "translate(150,200)");

        var tree = d3.layout.tree()
          // Using nodeSize we are able to control
          // the separation between nodes. If we used
          // the size parameter instead then d3 would
          // calculate the separation dynamically to fill
          // the available space.
          .nodeSize([100, 200])
          // By default, cousins are drawn further apart than siblings.
          // By returning the same value in all cases, we draw cousins
          // the same distance apart as siblings.
          .separation(function(){
            return .5;
          })
          // Tell d3 what the child nodes are. Remember, we're drawing
          // a tree so the ancestors are child nodes.
          .children(function(person){
            return person._parents;
          });

        d3.json('Data/4gens.json', function(error, json){

          if(error) {
            return console.error(error);
          }

          var nodes = tree.nodes(json),
              links = tree.links(nodes);

          // Style links (edges)
          svg.selectAll("path.link")
              .data(links)
            .enter().append("path")
              .attr("class", "link")
              .attr("d", elbow);

          // Style nodes    
          var node = svg.selectAll("g.person")
              .data(nodes)
            .enter().append("g")
              .attr("class", "person")
              .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });

          // Draw the rectangle person boxes
          node.append("rect")
              .attr({
                x: -(boxWidth/2),
                y: -(boxHeight/2),
                width: boxWidth,
                height: boxHeight
              });

          // Draw the person's name and position it inside the box
          node.append("text")
              .attr("dx", -(boxWidth/2) + 10)
              .attr("dy", 0)
              .attr("text-anchor", "start")
              .attr('class', 'name')
              .text(function(d) { 
                return d.name; 
              });

        });

        /**
         * Custom path function that creates straight connecting lines.
         */
        function elbow(d) {
          return "M" + d.source.y + "," + d.source.x
            + "H" + (d.source.y + (d.target.y-d.source.y)/2)
            + "V" + d.target.x 
            + "H" + d.target.y;
        }

        </script>
        </body>
        </html>

引发错误 
   d3.min.js:1 Access to XMLHttpRequest at 'file:///C:/Users/xyz34/Desktop/treant-js-master/Data/4gens.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

当我将CDN更新为此 https://cdnjs.cloudflare.com/ajax/libs/d3/5.12.0/d3.min.js时
然后抛出以下错误 
 Uncaught TypeError: Cannot read property 'zoom' of undefined
at basic.html:39
 Uncaught TypeError: Cannot read property 'tree' of undefined
at basic.html:48

这是我的json内容 
        {
          "name": "Maude Fernandez",
          "id": "06ada7cd-3078-54bc-bb87-72e9d6f38abf",
          "_parents": [
            {
              "name": "Janie Norton",
              "id": "a39bfa73-6617-5e8e-9470-d26b68787e52",
              "_parents": [
                {
                  "name": "Pearl Cannon",
                  "id": "fc956046-a5c3-502f-b853-d669804d428f",
                  "_parents": [
                    {
                      "name": "Augusta Miller",
                      "id": "fa5b0c07-9000-5475-a90e-b76af7693a57"
                    },
                    {
                      "name": "Clayton Welch",
                      "id": "3194517d-1151-502e-a3b6-d1ae8234c647"
                    }
                  ]
                },
                {
                  "name": "Nell Morton",
                  "id": "06c7b0cb-cd21-53be-81bd-9b088af96904",
                  "_parents": [
                    {
                      "name": "Lelia Hernandez",
                      "id": "667d2bb6-c26e-5881-9bdc-7ac9805f96c2"
                    },
                    {
                      "name": "Randy Welch",
                      "id": "104039bb-d353-54a9-a4f2-09fda08b58bb"
                    }
                  ]
                }
              ]
            },
            {
              "name": "Helen Alvarado",
              "id": "522266d2-f01a-5ec0-9977-622e4cb054c0",
              "_parents": [
                {
                  "name": "Gussie Glover",
                  "id": "da430aa2-f438-51ed-ae47-2d9f76f8d831",
                  "_parents": [
                    {
                      "name": "Mina Freeman",
                      "id": "d384197e-2e1e-5fb2-987b-d90a5cdc3c15"
                    },
                    {
                      "name": "Charlotte Martin",
                      "id": "ea01728f-e542-53a6-acd0-6f43805c31a3"
                    }
                  ]
                },
                {
                  "name": "Jesus Pierce",
                  "id": "bfd1612c-b90d-5975-824c-49ecf62b3d5f",
                  "_parents": [
                    {
                      "name": "Donald Cox",
                      "id": "4f910be4-b827-50be-b783-6ba3249f6ebc"
                    },
                    {
                      "name": "Alex Gonzales",
                      "id": "efb2396d-478a-5cbc-b168-52e028452f3b"
                    }
                  ]
                }
              ]
            }
          ]
        }

最佳答案

您的代码工作正常，我使用您的代码和数据创建了一个html文件和一个json文件，它可以正常工作。

根据问题中的评论:
d3.min.js:1 Access to XMLHttpRequest at 'file:///C:/Users/ptiwar34/Desktop/treant-js-master/Data/4gens.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https
这是一个CORS问题。 D3.js无法访问您的数据，因为它位于不同的域中，并且出于安全原因，浏览器将其阻止。

您可以通过运行HTTP服务器来解决该问题，here是有关如何执行此操作的小指南，也有其他替代方法，但就我而言，这是我觉得更舒适的方法。

祝好运。

关于javascript - 如何运行D3 JavaScript库创建水平图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58051687/

24 4 0
文章推荐： Powershell 比较 if 结构中的字符串给出错误结果
文章推荐： java - EJB 本地调用出现错误目标异常
文章推荐： java - 使用 PDFBox 搜索单词的程序
文章推荐： Vim 或 sed : Replace character(s) within a pattern
行者123
个人简介

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

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com