D3 - 未顯示和弦圖的圓弧

Question

我試圖理解D3和弦圖是如何工作的。 我的第一步是使用以下腳本顯示圖表的弧。 但由於某種原因，弧線沒有出現。

請在此處查看網頁

有人可以告訴我我錯過了什么嗎？

    <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

你的問題源於d3.tsv 異步的事實：

在指定的URL處發出對逗號分隔值（CSV）文件的HTTP GET請求...異步處理請求。

因此，在“定義圖表布局”下的所有代碼都在加載任何數據之前執行。 否則，您的代碼工作正常（見下圖）。 所以只需將你的所有代碼移到你的d3.tsv(...)調用中，你就可以了。

在此輸入圖像描述

Answer 2

您的腳本正在運行而沒有錯誤，但沒有從您的數據連接創建任何元素。 這通常表示您傳遞的是零長度數據數組。

事實上，你根本就沒有傳入陣列; 你正在傳遞一個函數對象。 當d3查找該對象的數組長度時，它返回undefined，強制轉換為數字零，因此不會創建任何組和沒有和弦。

代碼的相關部分：

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

要實際獲取和弦組數據對象的數組，您需要調用chord.groups() 。 如果沒有末尾的() ， chord.groups就是函數作為對象的名稱。

編輯添加：

哎呀，我甚至沒有注意到你的繪圖代碼沒有包含在你的d3.tsv回調函數中。 修復，如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