Question

我一直试图拼凑这个问题的答案，但我正式难过。我正在D3中进行强制布局可视化，与http://vallandingham.me/vis/gates/非常相似。我遇到的问题是当我点击一个单选按钮时，我的节点被分组和取消分组。节点将短暂移动到新位置，但几乎立即快速恢复到原始形式。任何有关此事的帮助将非常感谢！我花了几个小时搜索吉姆的博客/代码，其他例子形成了博斯托克，但无济于事。以下是我的代码。再一次，我很感激任何建议......

由于

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

Answer 1

我认为您需要将节点的属性实际设置为新位置。现在，您正在移动位置而不更改任何属性，这可能会解释您正在观察的行为。在引用的例子中，发生以下情况：

.attr("cx", (d) -> d.x)
.attr("cy", (d) -> d.y)

新的“cx”和“cy”由方法“move_towards_year”设置。所以你应该创建一个相应的方法来放置你已经写过的逻辑：

d.x = d.x + (d.line*10 - d.x) * (.01 + 0.02);
d.y = d.y + (300 - d.y) * (.01 + 0.02);

然后在类似于“display_by_year”方法的庄园中调用此方法：

display_by_whatever: () =>
  @force.gravity(@layout_gravity)
    .charge(this.charge)
    .friction(0.9)
    .on "tick", (e) =>
      @circles.each(this.your_move_method(e.alpha))
        .attr("cx", (d) -> d.x)
        .attr("cy", (d) -> d.y)
  @force.start()

处理单选按钮事件（根据您的评论）执行以下操作：

d3.select('radio button id/class').on('change', display_by_whatever)

使用单选按钮对节点进行分组

1 个答案: