D3 - Дуги для диаграммы аккордов не отображаются

Я пытаюсь понять, как работает диаграмма аккордов D3. Мой первый шаг - отобразить дуги для диаграммы со следующим сценарием. Но по какой-то причине дуги не появляются.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>

источник

2014-11-10 ChrisJ

Ваша проблема связана с тем, что d3.tsvis asynchronous:

Вопросы запрос GET HTTP-файла, разделенные запятыми (CSV) по указанному URL ... Запрос является обрабатывается асинхронно.

В результате, весь код в разделе «Определение макета диаграммы» в настоящее время выполняется перед любой загрузке данных. В противном случае ваш код работает нормально (см. Изображение ниже). Поэтому просто переместите весь свой код в свой вызов d3.tsv(...), и все будет готово.

enter image description here

источник

2014-11-10 16:41:45 mdml

Ваш скрипт работает без ошибок, но ни один из элементов не создаются из ваших данных присоединиться. Обычно это знак того, что вы передаете массив данных нулевой длины.

Фактически, вы не проходите в массиве вообще; вы передаете объект функции. Когда d3 просматривает длину массива этого объекта, он возвращает undefined, который принуждается к нулевому числу, поэтому группы и никакие аккорды не создаются.

Соответствующая часть кода:

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

Чтобы действительно получить массив объектов данных аккорд группы, вам нужно позвонить chord.groups(). Без () в конце, chord.groups - это просто имя функции как объекта.

Edited добавить:

Упс, я даже не заметил, что ваш код рисования не был включен в вашей функции обратного вызова d3.tsv. Исправьте это, как описано в mdml's answer, затем исправьте выше.

источник

2014-11-10 16:41:54 AmeliaBR

FYI вы можете просто передать функцию 'chord.groups', так как' selection.data' может принимать функцию. См. Второе предложение [docs] (https://github.com/mbostock/d3/wiki/Selections#data). (MBostock также использовал в основном тот же код, что и OP в [этом примере] (http://bl.ocks.org/mbostock/4062006).) – mdml

А, это верно. Функция 'chord.groups' будет передавать неопределенный объект данных в качестве параметра, но это нормально, поскольку функция все равно не использует параметры. – AmeliaBR

D3 - Дуги для диаграммы аккордов не отображаются

ответ

Смежные вопросы