D3.js 使用d3更改点击事件的数据

我发现这是一个饼图，我希望当列表项text（）在其中更新时，可以（轻松地）修改它以进行更新，遗憾的是，我对工作中的机制有很大的误解，希望能得到一些帮助，找出它为什么不能按我所希望的方式运行

这是一个plnk+代码

HTML:

我想问题可能是我没有正确引用值

非常感谢您的建议

干杯

---

您的onclick函数应该是这样的：

$("a").on('click', function() {
    console.dir(this.innerHTML)
      $("#data").html(this.innerHTML)
      change(this.innerHTML.toLowerCase())

  })

这将获取innerHTML，即按下的链接的文本值，并将其传递给change函数（我已经添加了该函数）。此外，在检查字符串是否为oranges而不是oranges时，将其置于小写

更新的plnkr：

再解释一下

---

您试图获取文本元素的

值

，而下面的示例是从复选框中获取该值。你不能从文本中获取价值，你需要获取innerHTML或textContent等

你可以像这样简化代码。太好了，谢谢！

var width = 960,
  height = 500,
  radius = Math.min(width, height) / 2;

var color = d3.scale.category20();

var pie = d3.layout.pie()
  .value(function(d) {
    return d.apples;
  })
  .sort(null);

var arc = d3.svg.arc()
  .innerRadius(radius - 100)
  .outerRadius(radius - 20);

var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

d3.tsv("data.tsv", type, function(error, data) {

  $("a").on('click', function() {
    $("#data").html($(this).text())
  }).on('click', function() {
    if ($("#data").text() == "Oranges") {
      change()
    }
  })

  if (error) throw error;
  console.log(data)
  var path = svg.datum(data).selectAll("path")
    .data(pie)
    .enter().append("path")
    .attr("fill", function(d, i) {
      return color(i);
    })
    .attr("d", arc)
    .each(function(d) {
      this._current = d;
    }); // store the initial angles


  function change() {
    var value = this.value;
    console.log(value)
    pie.value(function(d) {
      return d[value];
    }); // change the value function
    path = path.data(pie); // compute the new angles
    path.transition().duration(750).attrTween("d", arcTween); // redraw the arcs
  }
});

function type(d) {
  d.apples = +d.apples;
  d.oranges = +d.oranges;
  return d;
}

// Store the displayed angles in _current.
// Then, interpolate from _current to the new angles.
// During the transition, _current is updated in-place by d3.interpolate.
function arcTween(a) {
  var i = d3.interpolate(this._current, a);
  this._current = i(0);
  return function(t) {
    return arc(i(t));
  };
}

$("a").on('click', function() {
    console.dir(this.innerHTML)
      $("#data").html(this.innerHTML)
      change(this.innerHTML.toLowerCase())

  })