D3 - 未显示和弦图的圆弧

Question

I trying to understand how the D3 chord diagram works. 我试图理解D3和弦图是如何工作的。 My first step is to display the arcs for the diagram with following script. 我的第一步是使用以下脚本显示图表的弧。 But for some reason, the arcs are not showing up. 但由于某种原因，弧线没有出现。

See web page HERE 请在此处查看网页

Can some one tell me what I am missing? 有人可以告诉我我错过了什么吗？

    <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>

Answer 1

Your problem stems from the fact that d3.tsv is asynchronous : 你的问题源于d3.tsv 异步的事实：

Issues an HTTP GET request for the comma-separated values (CSV) file at the specified url... The request is processed asynchronously. 在指定的URL处发出对逗号分隔值（CSV）文件的HTTP GET请求...异步处理请求。

As a result, all of your code under "Define diagram layout" is being executed before any data is loaded . 因此，在“定义图表布局”下的所有代码都在加载任何数据之前执行。 Otherwise, your code works fine (See image below). 否则，您的代码工作正常（见下图）。 So just move all your code into your d3.tsv(...) call and you'll be all set. 所以只需将你的所有代码移到你的d3.tsv(...)调用中，你就可以了。

在此输入图像描述

Answer 2

Your script is running without errors, but no elements are being created from your data join. 您的脚本正在运行而没有错误，但没有从您的数据连接创建任何元素。 That's usually a sign that you are passing in a zero-length data array. 这通常表示您传递的是零长度数据数组。

In fact, you're not passing in an array at all; 事实上，你根本就没有传入阵列; you're passing a function object. 你正在传递一个函数对象。 When d3 looks up the array length of that object, it returns undefined, which gets coerced to the number zero, and so no groups and no chords are created. 当d3查找该对象的数组长度时，它返回undefined，强制转换为数字零，因此不会创建任何组和没有和弦。

Relevant part of your code: 代码的相关部分：

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

To actually get the array of chord group data objects, you need to call chord.groups() . 要实际获取和弦组数据对象的数组，您需要调用chord.groups() 。 Without the () at the end, chord.groups is just the name of the function as an object. 如果没有末尾的() ， chord.groups就是函数作为对象的名称。

Edited to add: 编辑添加：

Ooops, I hadn't even noticed that your drawing code wasn't included inside your d3.tsv callback function. 哎呀，我甚至没有注意到你的绘图代码没有包含在你的d3.tsv回调函数中。 Fix that, as described in mdml's answer , then fix the above. 修复，如mdml的答案中所述，然后解决上述问题。

D3 - 未显示和弦图的圆弧

问题描述

2 个解决方案

解决方案1
2 已采纳 2014-11-10 16:41:45

解决方案2
1 2014-11-10 16:41:54

D3 - 未显示和弦图的圆弧

问题描述

2 个解决方案

解决方案1 2 已采纳 2014-11-10 16:41:45

解决方案2 1 2014-11-10 16:41:54

解决方案1
2 已采纳 2014-11-10 16:41:45

解决方案2
1 2014-11-10 16:41:54