1

这是一个非常基本的问题，但是如何访问 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 和类似的事情，但我不确定正确的语法是什么谢谢！

4

1 回答 1

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 绑定的 DOM 元素。通常，圆的面积必须与您显示的数量成比例，请查看Quantitative Scale的文档。你的小提琴的叉子在这里。

于 2013-06-18T20:29:45.710 回答