Question

我找到了这个example的饼图，我希望修改它（很容易）在列表项text（）更新时更新，遗憾的是我非常误解了工作中的机制并希望一些帮助弄清楚为什么它不符合我的意愿。

这是一个plnk +代码;

HTML：

   <li><a href="#" id="data">Apples</a>
              <ul id="dataset">
          <li>
            <a href="#" name="d" value="apples">Apples</a>
          </li>
          <li>
            <a href="#" name="d" value="oranges">Oranges</a>
          </li>
        </ul>
      </li>
    </ul>

使用Javascript：

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));
  };
}

我认为问题可能是我没有正确引用该值？

非常感谢任何建议，

干杯

Plunk

Answer 1

你的onclick功能应该是这样的：

dtype='i'

这将获取innerHTML，即按下的链接的文本值，并将其传递给更改功能（我已添加）。另外，当它检查字符串是橙色而不是橙色时，放入小写字母。

更新了plnkr：http://plnkr.co/edit/d7qJjBaihVALSdkzPtYi?p=preview

更多解释。

您试图获取文本元素的$("a").on('click', function() { console.dir(this.innerHTML) $("#data").html(this.innerHTML) change(this.innerHTML.toLowerCase()) })，而您关注的示例是从复选框获取它。您无法从获取innerHTML或textContent等所需的文本中获取价值

使用d3更改单击事件的数据

1 个答案: