1

私はこの質問に対する答えをまとめようとしていますが、公式には困惑しています. http://vallandingham.me/vis/gates/と非常によく似た、D3 で強制レイアウトの視覚化に取り組んでいます。私が抱えている問題は、ラジオ ボタンをクリックしたときにノードをグループ化およびグループ化解除することです。ノードは一時的に新しい場所に移動しますが、ほとんどすぐに元の形に戻ります。この問題について何か助けていただければ幸いです。私は文字通りジムのブログ/コードを精査するのに何時間も費やしましたが、他の例はボストックからのものでしたが、役に立ちませんでした。以下は私のコードです。また何かアドバイス頂けたら嬉しいです...

ありがとう

<body>
 <form>
    <input type="radio" name="radio" value="P1",  checked="checked"> Group
    <input type="radio" name="radio" value="P2",  unchecked> Category Group
</form>
<script src="d3.v3.js"></script>
<script>

  var width = 960,
      height = 700;

  var svg = d3.select("body").append("svg")
       .attr("width", width)
       .attr("height", height) 

//Load Data
  d3.csv("data/ski5.csv", function(error, data) {

  var rScale = d3.scale.linear()
      .domain([0,d3.max(data, function (d) {return d.acres; })])
      .range([0, 12]);          

  var force = d3.layout.force()
      .nodes(data)
      .size([width, height])
      .on("tick", tick)
      .charge(charge);
    force.alpha()
    force.gravity(.45)
    force.start()

   var node = svg.selectAll("circle")
       .data(force.nodes()) 
       .enter()
       .append("circle")
       .attr("class", "node")
       .attr("r",  function(d) {return (rScale(d.acres));})
       .attr("stroke", "white")
       .attr("stroke-width", .5)
       .attr("fill", function(d) {return d.color;})
       .call(force.drag);
    svg.style("opacity", 1e-6)
       .transition()
       .duration(1300)
       .style("opacity", 1);

 function charge(d) {
     return ((rScale(d.acres)) * (rScale(d.acres)) * (-.65));
 } 


 function tick(e) {
    node.attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });
  }


//Radio Button for Category Group
  d3.selectAll("input[value=P2]")
      .on("change", groupCategory);  

 function groupCategory() {
    data.forEach(function(d, i) {   
       d.x = d.x + (d.line*10 - d.x) * (.01 + 0.02);
       d.y = d.y + (300 - d.y) * (.01 + 0.02);
       });
   force.start();
 }

;}) 

</script>
4

1 に答える 1