javascript - 在表格内分隔 D3 饼图

Question

我有一个由 PHP、MySQL 和 Smarty 输出的 HTML 数据表，因此该结构已经存在 - 它不是由 D3 js 构建的。使用this guide作为模板，我想定位特定的 td 单元格并添加图表。这是我到目前为止的代码...

<table class="table">
  <tr>
    <td class="d3chart v-155"></td>
    <td>Other data</td>
  </tr>
  <tr>
    <td class="d3chart v-168"></td>
    <td>Other data</td>
  </tr>
</table>

编辑:我已经更新了 JS 并取得了在相应单元格中显示图表的进展(woohoo)。我在将路径附加到 SVG 时遇到问题，现在可以了。请参阅下面更新的 JS ...

// On ready call functions
$(function init() {
  ChartApp.init();
});

/** Interaction with D3 chart. Chart data is loaded directly into the template file  */
var ChartApp = {

  config: {
    width: 100,
    height: 100,
    radius: 50, 
    data: [
      { cell:'v-155', score:82, extra:18 },
      { cell:'v-168', score:75, extra:25 }
    ],
    arcs: [
      [82,18],
      [75,25]
    ]
  },

  init: function() {

    // Insert an svg element for each row in our dataset. A child g
    // element translates the origin to the pie center.
    var svg = d3.select('body').select('svg')
        .data(ChartApp.config.data, function(d) { d3.select('.' + d.cell)
          .append('svg')
            .attr('width', ChartApp.config.width)
            .attr('height', ChartApp.config.height)
          .append('g')
            .attr('transform', 'translate(' + ChartApp.config.radius + ',' + ChartApp.config.radius + ')')
          .append('text')
            .attr('dy', '.35em')
            .attr('text-anchor', 'middle')
            .attr('fill', '#003580')
            .text(d.score);
        });

    // Define the pie layout
    var pie = d3.layout.pie()
        //.sort(null)
        .value(function(d) {
          console.log(d.score, d.extra);
          return (d.score, d.extra);
        });

    // Define the arc radius
    var arc = d3.svg.arc()
        .innerRadius(ChartApp.config.radius / 1.6)
        .outerRadius(ChartApp.config.radius);

    // Define the color scale
    var colour = d3.scale.category20c();

    // Pass the data to d3.layout.pie to compute the angles for each arc.
    // These start and end angles are passed to d3.svg.arc to draw arcs.
    d3.selectAll('svg g').selectAll('path')
      .data(pie(ChartApp.config.data))
      //.data(function(d) {
      //  return pie(ChartApp.config.data);
      //})
      .enter().append('path')
        .attr('d', arc)
        .attr('fill', function(d, i) { return colour(i); });
  }
};

但是，图表现在是重复的，而不是迭代数据数组。请问是否有人可以帮助重组数据或定义一种以正确方式循环每个数据元素的方法？

Answer 1

我已经针对这个特定问题提出了一个解决方案，以防对其他人有帮助。肯定会有一种更“D3”的方式来做到这一点，但目前这是可行的。标记没有改变，这里是更新的 JS，它将 D3 饼图输出到相应的表数据单元格行中...

// On ready call functions
$(function init() {
  ChartApp.init();
});

/** Interaction with D3 chart. Chart data is loaded directly into the template file  */
var ChartApp = {

  config: {
    width: 100,
    height: 100,
    radius: 50,
    data: [
      { cell:'v-155', score:45, extra:55 },
      { cell:'v-168', score:78, extra:22 },
      { cell:'v-173', score:76, extra:24 },
      { cell:'v-199', score:59, extra:41 },
      { cell:'v-177', score:75, extra:25 },
      { cell:'v-145', score:84, extra:16 },
      { cell:'v-156', score:82, extra:18 },
      { cell:'v-92', score:100, extra:0  },
      { cell:'v-162', score:80, extra:20 },
      { cell:'v-180', score:74, extra:26 }
    ]
  },

  init: function() {

    // Insert an svg element for each row in our dataset. A child g
    // element translates the origin to the pie center.
    var svg = d3.select('body').select('svg')
        .data(ChartApp.config.data, function(d) { d3.select('.' + d.cell)
          .append('svg')
            .attr('width', ChartApp.config.width)
            .attr('height', ChartApp.config.height)
          .append('g')
            .attr('transform', 'translate(' + ChartApp.config.radius + ',' + ChartApp.config.radius + ')')
          .append('text')
            .attr('dy', '.35em')
            .attr('text-anchor', 'middle')
            .attr('fill', '#003580')
            .text(d.score);
        });

    // Define the pie layout
    var pie = d3.layout.pie().sort(null);

    // Define the arc radius
    var arc = d3.svg.arc()
        .innerRadius(ChartApp.config.radius / 1.6)
        .outerRadius(ChartApp.config.radius);

    // Define the color scale
    var colour = d3.scale.category20c();

    // Loop through the data and for each element attach the paths for the specific data points
    for (let x = 0; x < ChartApp.config.data.length; x++) {
      d3.select('.' + ChartApp.config.data[x].cell).selectAll('svg g').selectAll('path')
      .data(pie([ChartApp.config.data[x].score, ChartApp.config.data[x].extra]))
      .enter().append('path')
        .attr('d', arc)
        .attr('fill', function(d, i) { return colour(i); });
    }
  }
};

此代码现在循环遍历数据数组，以提取用于构建图表的正确数据点。我确信 D3 可以“自然”地做到这一点，但它似乎总是使用错误的值。