节点上的D3元数据

Question

我正在遵循本教程的前向图http://bl.ocks.org/mbostock/1153292 。 我想知道，如何将元数据/用户定义的数据传递到d3节点，并保留它以便以后进行操作。

例：

用户单击一个节点，将出现一个表，其中带有与该节点相连的相关元数据，例如标签，警报，注释以及其他不是d3节点/边缘体系结构所特定的数据。

Answer 1

您可以将所需的任何数据传递到d3，它会根据节点数据功能自动将其存储在节点上。 是否使用该数据填充节点和边线完全取决于您。

这是一个基本的饼图（请注意，为简洁起见，我省略了饼图和圆弧的定义）。 在此示例中， data包含构建饼图所需的信息。 这些元素最初存储在svg节点上，然后每个数组元素存储在相应的arc节点上。 该数据可以包含您想要的任何信息。 我用它来存储名称和CSS类，然后将其应用于饼形图。 但是，它可以根据需要包含尽可能丰富的数据。

var data = [
  { name: 'Schedule slip', classname: 'c', value: 5},
  { name: 'Slightly behind', classname: 'b', value: 10},
  { name: 'On track', classname: 'a', value: 20}

];

  // select the svg element if it exists
  var svg = d3.selectAll('svg').data([data]);

  // otherwise create the skeletal chart
  var svgEnter = svg.enter().append('svg');

  // chart skeleton
  var gEnter = svgEnter.append('g').attr('class', 'donut');
  gEnter.append('g').attr('class', 'arcs');

  // Dimensions
  var width = (2 * outerRadius) + margin.left + margin.right,
      height = (2 * outerRadius) + margin.top + margin.bottom,
      hCenter = width/2,
      vCenter = height/2;

  svg
    .attr('width', width)
    .attr('height', height)
    .select('.donut')
      .attr('transform', translate(hCenter, vCenter));

    // draw the arcs
    var arcs = svg.select('.arcs').selectAll('.arc')
        .data(pie);  // compute pie wedge info and store it in arc node

    var gArc = arcs.enter().append('g').attr('class', 'arc');
    gArc.append('path').each(function(d) { this._current = d; });

    arcs.exit().remove();

    arcs.select('path')
        .attr('class', function(d) { return d.data.classname; })
      .transition().duration(500)
        .attrTween('d', arcTween);