Question

我有这样的结构：

<svg class="pie" height="70" width="140">
    <g shift="0.14114767593868488" transform="translate(35,35)">
        <path class="arc" fill="#1f77b4" d="M-3.074456432660532,-29.842046137013963A30,30 0 0,1 20.028002120056104,22.335602321831978L10.014001060028052,11.167801160915989A15,15 0 0,0 -1.537228216330266,-14.921023068506981Z"></path>
        <path class="arc" fill="#aec7e8" d="M20.028002120056104,22.335602321831978A30,30 0 1,1 -3.074456432660514,-29.842046137013963L-1.537228216330257,-14.921023068506981A15,15 0 1,0 10.014001060028052,11.167801160915989Z"></path>
    </g>
    <g shift="2.805044461018128" transform="translate(105,35)">
        <path class="arc" fill="#1f77b4" d="M-3.074456432660532,-29.842046137013963A30,30 0 0,1 27.43141315203026,-12.145681227605914L13.71570657601513,-6.072840613802957A15,15 0 0,0 -1.537228216330266,-14.921023068506981Z"></path>
        <path class="arc" fill="#aec7e8" d="M27.43141315203026,-12.145681227605914A30,30 0 1,1 -3.074456432660514,-29.842046137013963L-1.537228216330257,-14.921023068506981A15,15 0 1,0 13.71570657601513,-6.072840613802957Z"></path>
    </g>
</svg>

你知道，我已将这个'shift'属性附加到每个'g'元素。

现在我有了这个过渡功能（它用于旋转车轮）。我想从attrTween函数内部访问父'g'元素的shift属性的值（将其分配给'theShift'变量）：

var wheelsData = [
    {
        arcs: [
            {startAngle: 0, endAngle: 0.4 * endAngle},
            {startAngle: 0.4 * endAngle, endAngle: endAngle}
        ],
        shift: Math.random() * fullAngle / 2
    },
    {
        arcs: [
            {startAngle: 0, endAngle: 0.2 * endAngle},
            {startAngle: 0.2 * endAngle, endAngle: endAngle}
        ],
        shift: Math.random() * fullAngle / 2
    }
];

var arc = d3.svg.arc().outerRadius(30).innerRadius(innerRadius);

svg.selectAll("g").remove();

var gBindings = svg.selectAll("g").data(wheelsData);
var gEnter = gBindings.enter();

gEnter.append("g")
    .attr("shift", function(d, i) {
        return d.shift;
    })
    .selectAll("path.arc")
        .data(function(d, i) { 
            return d.arcs;
        })
    .enter()
        .append("path")
        .attr("class", "arc")
        .attr("fill", function (d, i) {
            return colors(i);
        })
        .transition().duration(5000)
        .attrTween("d", function (d) {
            var theShift = ???;
            return function (t) {
                ...
            };
        });

如何在D3中做到这一点？我已经尝试过d3.select（this.parent）等等。但都失败了（显然它并没有让我回到'g'节点。）

解答：

使用'this'找到它：

.attrTween("d", function (d) {
  var pathElement = this;
  return function (t) {
    var shift = pathElement.parentNode.__data__.shift;
    ...
  };
});

提前致谢，拉嘎

Answer 1

找到它，使用＆＃39;这个＆＃39;：

.attrTween("d", function (d) {
  var pathElement = this;
  return function (t) {
    var shift = pathElement.parentNode.__data__.shift;
    ...
  };
});

从attrTween回调函数（D3）内部获取父节点的访问权限

1 个答案: