Question

我正在尝试使用我的csv文件（group2）中的另一个变量更新强制布局。尽管我能够使圈子分开一次，但我不完全了解如何进行更新。我想要的是，当您单击屏幕时，圆的位置会根据另一个变量更改为另一个组。与本文的用法类似的内容：https://www.theguardian.com/world/ng-interactive/2019/mar/29/a-year-of-bloodshed-at-gaza-border-protests

我的代码：

const h = 1000;
const w = 1000;
let dataset;
        d3.csv("barcharttest.csv").then (function(data) {
            dataset=data;
            const svg = d3.select("body")
                    .append("svg")
                     .attr("width", w) 
                     .attr("height", h);

   const x = d3.scaleOrdinal()
  .domain([1, 2])
  .range([50, 200]);

const color = d3.scaleOrdinal().domain([1, 2]).range([ "#F8766D", "#00BA38"]);  

const node = svg.append("g").selectAll("circle").data(dataset).enter().append("circle").attr("r", 6).attr("cx", w / 15).attr("cy", h / 15).style("fill", "#70a288") .attr("stroke", "none");

var simulation = d3.forceSimulation()
.force("x", 
d3.forceX().strength(0.1).x(function(d){ return 
x(d.group) }))
.force("y", d3.forceY().strength(0.1).y(h/2))
.force("center", d3.forceCenter().x(w / 2).y(h 
/ 2    
.force("charge", 
d3.forceManyBody().strength(1))    
.force("collide", d3.forceCollide().strength(.1).radius(8).iterations(1))

simulation.nodes(dataset).on("tick", function(d){node.attr("cx", function(d){ return d.x; }).attr("cy", function(d){ return d.y; })
});});


My data:
name,group,group2
we,1,2
le,1,3
klf,1,1
fl,2,2
re,2,1
ss,2,1
fkf,1,2
qq,1,2
ww,1,2
rr,2,1
tt,2,2
kk,1,1

如果有人可以对此有所解释，会真高兴。

更新力布局D3

0 个答案: