Как нарисовать внутренние узлы графа?

Question

Я могу использовать d3, чтобы нарисовать круговую диаграмму или график, я могу даже нарисовать круговую диаграмму в каждом узле графика, как показано на рисунке here.

Возможно ли создать функцию многократного использования, которая генерирует круговую диаграмму и присоединяет ее результат к каждому узлу? Таким образом, код диаграммы может быть повторно использован, например, в галерее диаграмм.

var node = svg.selectAll(".node") 
    .data(graph.nodes) 
    .enter().append("g") 
    .attr("class", "node"); 

    // draw pie chart 
    node.selectAll("path") 
    .data(function(d, i) {return pie(d.proportions); }) 
    .enter() 
    .append("svg:path") 
    .attr("d", arc) 
    .attr("fill", function(d, i) { return color(d.data.group); });; 

Из приведенного выше кода, я попытался следующий код, который не работает

var node = svg.selectAll(".node") 
    .data(graph.nodes) 
    .enter().append("g") 
    .attr("class", "node") 
    .call(drawPie(function(d) { return d.proportions; })); 

    function drawPie(d) { 
     this.selectAll("path") 
     .data(function(d, i) {return pie(d.proportions); }) 
     .enter() 
     .append("svg:path") 
     .attr("d", arc) 
     .attr("fill", function(d, i) { return color(d.data.group); });; 
    } 

Answer 1

Вашей оригинальной идеи гораздо ближе, чем тот, рекомендованным в другом ответе, вы просто должны понять, как selection.call работы.

Это не проверял, но общий принцип похож ...

var node = svg.selectAll(".node") 
.data(graph.nodes) 
.enter().append("g") 
.attr("class", "node") 
.call(drawPie); 

function drawPie(selection) { 
    this.selectAll("path") 
    .data(function(d, i) {return pie(d.proportions); }) 
    .enter() 
    .append("svg:path") 
    .attr("d", arc) 
    .attr("fill", function(d, i) { return color(d.data.group); });; 
} 

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

.call(drawPie(function(d) { return d.proportions; })); 

. .. на самом деле пытается позвонить null, потому что это то, что возвращается drawPie. Это эквивалентно ...

.call(null); 

Answer 2

var node = svg.selectAll(".node") 
    .data(graph.nodes) 
    .enter() 
    .append(function(d){return createPie(d);}) // .append(createPie) --- shorter version 
    .attr("class", "node"); 


function createPie(data) { 
    var pie = d3.select(document.createElement('svg:g')); 

    pie.selectAll('path') 
    ...; 

    return pie.node(); 
} 

UPDATE:

function createPie(d) { 
    console.log(d); 
     var p = d3.select(document.createElement('svg:g')); 
     p.selectAll('path') 
      .data(pie(d.proportions)) 
      .enter() 
      .append("svg:path") 
      .attr("d", arc) 
      .attr("fill", function(d, i) { return color(d.data.group); }); 
     return p.node(); 
} 

нуждается в предыдущей переменной пирог будет переработан, потому что он перезаписывает одно в родительской области.

и вызов данных должен быть фиксированным, а

Answer 3

На основе рекомендаций, вот модифицированный код, который все еще требует некоторых улучшений. Отчет сообщения об ошибке, что «строка 93 не определена не является объект оценки d.proportions»

 graph = { "nodes":[ 
          {"proportions": [{"group": 1, "value": 1}, 
              {"group": 2, "value": 2}, 
              {"group": 3, "value": 3}]}, 
          {"proportions": [{"group": 1, "value": 2}, 
              {"group": 2, "value": 2}, 
              {"group": 3, "value": 2}]}], 
              "links":[{"source": 0, "target": 1, "length": 500, "width": 1}] 
     } 

    var width = 960, 
    height = 500, 
    radius = 25, 
    color = d3.scale.category10(); 

    var pie = d3.layout.pie() 
    .sort(null) 
    .value(function(d) { return d.value; }); 

    var arc = d3.svg.arc() 
    .outerRadius(radius) 
    .innerRadius(10); 

    var svg = d3.select("body").append("svg") 
    .attr("width", width) 
    .attr("height", height); 

    var force = d3.layout.force() 
    .charge(-120) 
    .linkDistance(4 * radius) 
    .size([width, height]); 

    force.nodes(graph.nodes) 
    .links(graph.links) 
    .start(); 

    var link = svg.selectAll(".link") 
    .data(graph.links) 
    .enter().append("line") 
    .attr("class", "link"); 

    var node = svg.selectAll(".node") 
    .data(graph.nodes) 
    .enter() 
    .append(function(d) {return createPie(d);}) // .append(createPie) --- shorter version 
    .attr("class", "node"); 

    // node.selectAll("path") 
    // .data(function(d, i) {return pie(d.proportions); }) 
    // .enter() 
    // .append("svg:path") 
    // .attr("d", arc) 
    // .attr("fill", function(d, i) { return color(d.data.group); });; 

    force.on("tick", function() { 
      link.attr("x1", function(d) { return d.source.x; }) 
      .attr("y1", function(d) { return d.source.y; }) 
      .attr("x2", function(d) { return d.target.x; }) 
      .attr("y2", function(d) { return d.target.y; }); 

      node.attr("x", function(d) { return d.x; }) 
      .attr("y", function(d) { return d.y; }) 
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"}); 
      }); 

    function createPie(d) { 
     console.log(d); 
      var pie = d3.select(document.createElement('svg:g')); 
      pie.selectAll('path') 
       .data(function(d, i) {return pie(d.proportions); }) 
       .enter() 
       .append("svg:path") 
       .attr("d", arc) 
       .attr("fill", function(d, i) { return color(d.data.group); }); 
      return pie.node(); 
    }