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

在此上下文中，这指向与d绑定的DOM元素。通常，圆的面积必须与您显示的数量成比例，请查看Quantitative Scale的文档。小提琴的叉子是here。

D3获取变量值

1 个答案: