javascript - D3 获取变量值

Question

这是一个非常基本的问题，但是如何访问 d3 中的属性值？ 我今天刚开始学习，还没搞明白

假设我将此作为我的代码的一部分 http://jsfiddle.net/matthewpiatetsky/nCNyE/9/

   var node = svg.selectAll("circle.node")
       .data(nodes)
       .enter().append("circle")
       .attr("class", "node")
       .attr("r", function (d) {
        if (width < height){
        return d.count * width/100;
        } else {
        return d.count * height/100;
        }
})
     .on("mouseover", animateFirstStep)
     .on("mouseout",animateSecondStep)
       .style("fill", function(d,i){return color(i);})
       .call(force.drag);

对于我的动画，当您将鼠标悬停在圆圈上时，圆圈会变大，并且我希望当您将鼠标移开时，圆圈会恢复到正常大小。但是，我不确定如何获取半径值。

我在这里设置了值

.attr("r", function (d) {
        if (width < height){
        return d.count * width/100;
        } else {
        return d.count * height/100;
        }

我尝试做node.r之类的事情，但我不确定正确的语法是什么 谢谢!

Answer 1

您可以通过以下方式访问选择的属性:

var node = svg.selectAll("circle.node")
  .data(nodes)
  .enter().append("circle")
  .attr("class", "node")
  .attr("r", function (d) { return rScale(d.count); })
  .on("mouseover", function(d) { 
    d3.select(this)
      .transition()
      .duration(1000)
      .attr('r', 1.8 * rScale(d.count));
    })
  .on("mouseout", function(d) { 
    d3.select(this)
      .transition()
      .duration(1000)
      .attr('r', rScale(d.count));
  })
  .style("fill", function (d, i) {
    return color(i);
  })
 .call(force.drag);

在此上下文中，this 指向与 d 绑定(bind)的 DOM 元素。通常，圆的面积必须与您显示的数量成正比，请查看 Quantitative Scale 的文档s。你的 fiddle fork 是 here .