節點上的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);