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

このコンテキストでは、これは d でバインドされた DOM 要素を指します。通常、円の面積は、表示している量に比例する必要があります。Quantitative Scaleのドキュメントを参照してください。あなたのフィドルのフォークがここにあります。

于 2013-06-18T20:29:45.710 に答える