按其基准选择 d3 节点答案

【问题标题】：Select d3 node by its datum按其基准选择 d3 节点
【发布时间】：2014-04-25 18:27:55
【问题描述】：

我想在回调中选择一个节点而不使用d3.select(this)。

我有一些画饼的代码……

function drawPie(options) {
  options || (options = {});
  var data = options.data || [],
      element = options.element,
      radius = options.radius || 100,
      xOffset = Math.floor(parseInt(d3.select(element).style('width'), 10) / 2),
      yOffset = radius + 20;

  var canvas = d3.select(element)
              .append("svg:svg")
              .data([data])
              .attr("width", options.width)
              .attr("height", options.height)
              .append("svg:g")
              .attr("transform", "translate(" + xOffset + "," + yOffset + ")");

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

  var pie = d3.layout.pie()
    .value(function(data) {
      return data.percentageOfSavingsGoalValuation;
    });

  var arcs = canvas.selectAll("g.slice")
    .data(pie)
    .enter()
    .append("svg:g")
    .attr("class", "slice");

  arcs.append("svg:path")
    .on("mouseover", divergeSlice);

最后你会注意到我有一个电话给divergeSlice()。看起来像这样：

function divergeSlice(datum, index) {
  var angle = (datum.endAngle + datum.startAngle) / 2,
      x = Math.sin(angle) * 10,
      y = -Math.cos(angle) * 10;

  d3.select(this)
    .transition()
    .attr("transform", "translate(" + x + ", " + y + ")");
}

这可行，但我想在不使用this 的情况下完成此操作，正如我之前提到的。当我记录 datum 对象时，我得到如下内容：

{
  data: {
    uniqueID: "XX00X0XXXX00"
    name: "Name of value"
    percentageOfValuation: 0.4
    totalNetAssetValue: 0
  }
  endAngle: 5.026548245743669
  innerRadius: 80
  outerRadius: 120
  startAngle: 2.5132741228718345
  value: 0.4
}

如何使用d3.select() 找到包含datum.data.uniqueID 且等于“XX00X0XXXX00”的路径？

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

您不能直接使用 .select() 执行此操作，因为它使用 DOM 选择器。你可以做的是选择所有的候选人，然后过滤：

d3.selectAll("g")
  .filter(function(d) { return d.data.uniqueID === myDatum.data.uniqueID; });

但是，简单地将这个 ID 作为一个 ID 分配给 DOM 元素，然后根据它进行选择会更容易：

var arcs = canvas.selectAll("g.slice")
  .data(pie)
  .enter()
  .append("svg:g")
  .attr("id", function(d) { return d.data.uniqueID; })
  .attr("class", "slice");

d3.select("#" + myDatum.data.uniqueID);

【讨论】：

这是有道理的。谢谢你的解释！