个人中心
gpt4 book ai didi

javascript - D3 -- 未显示弦图的圆弧

转载 作者：行者123 更新时间：2023-11-30 12:33:35 26 4
gpt4 key购买 nike

我试图了解 D3 和弦图的工作原理。我的第一步是使用以下脚本显示图表的弧线。但由于某种原因，弧线没有出现。

查看网页 HERE

谁能告诉我我错过了什么？

    <body>
    <script>
        // Chart dimensions.
        var width = 960, 
                height = 750, 
                innerRadius = Math.min(width, height) * .41, 
                outerRadius = innerRadius * 1.1; 

  //Create SVG element with chart dementions
        var svg = d3. select("body")
                .append("svg")
                .attr("width", width) 
                .attr("height", height) 
                .append ("g")
                .attr("transform", "translate (" + width / 2 + "," + height / 2 + ")"); 

//------------Reformat Data ------------------------------------------

        var matrix = [];  // <- here is the data 
        d3.tsv('picData.tsv', function(err, data) 
        {
            //console.log(data);
            pictures = d3.keys(data[0]).slice(1);
            //console.log(pictures);

            data.forEach(function(row) 
            {
                var mrow = [];
                pictures.forEach(function(c) 
                {
                    mrow.push(Number(row[c]));
                });
                matrix.push(mrow);
            //console.log(mrow);
            }); 
            //console.log('1st row: ' + matrix[0]);
            //console.log(matrix);
        });

//---------------- Define diagram layout ----------------------------

        var chord = d3.layout.chord() //<-- produce a chord diagram from a matrix of input data
                .matrix(matrix)  //<-- data in matrix form
                .padding(0.05) 
                .sortSubgroups(d3.descending);

        var fill = d3.scale.category20(); //<-- https://github.com/mbostock/d3/wiki/API-Reference#d3scale-scales
            //console.log(fill);

        var g = svg.selectAll("g.group")
                .data(chord.groups)
                .enter().append("svg:g")
                .attr("class", "group"); 

                //console.log(g);

        // create arcs
        var arc = d3.svg.arc()
                .innerRadius(innerRadius)
                .outerRadius(outerRadius);

                //console.log(arc);

        g.append("path")
            .attr("d", arc)
            .style("fill", function(d) {  console.log(d.index); return fill(d.index);})
            .style("stroke", function(d) { return fill(d.index); })
            .attr("id", function(d, i) { return"group-" + d.index });;

        g.append("svg:text")
                .attr("x", 6)
                .attr("class", "picture")
                .attr("dy", 15)
            .append("svg:textPath")
                .attr("xlink:href", function(d) { return "#group-" + d.index; })
                .text(function(d) { return pictures[d.index]; }); 
            //console.log(g);

    </script>
    </body>

最佳答案

您的问题源于 d3.tsv is asynchronous :

Issues an HTTP GET request for the comma-separated values (CSV) file at the specified url... The request is processed asynchronously.

因此，“定义图表布局”下的所有代码都在加载任何数据之前执行。否则，您的代码可以正常工作(见下图)。因此，只需将所有代码移至 d3.tsv(...) 调用中，一切就绪。

enter image description here

关于javascript - D3 -- 未显示弦图的圆弧，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26845070/

26 4 0
文章推荐： c# - 使用 itextsharp 根据大小将 pdf 拆分为更小的 pdf
文章推荐： ios - 当我粘贴文本时，它无法获取文本的高度
文章推荐： javascript - 获取 JSON 数据时遇到问题
文章推荐： ios - 如何使今日提醒显示我需要的所有信息？
行者123
个人简介

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

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