个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我想创建我认为最好描述为力导向直方图(或点/气泡直方图)或 y 值沿 x 轴受限的蜂群。
也就是说，使用力导向布局，根据某些 x 值分配 x 位置，并根据该值的计数分配 y 位置，其中 y 值必须保持在某个下限之上。
我创建了一个 force-directed beeswarm plot这就是几乎我想要的。我只是还没有弄清楚 y 轴约束。
感谢您的帮助/建议!
最佳答案
要应用这样的约束，您可以直接限制 d.y 值——只需替换
.attr('cy', d => d.y)
例如，
.attr('cy', d => d.y = Math.min(d.y, height / 2))
这样节点被强制高于height/2。重要的是不仅要约束 cy，还要更新 d.y，以便在下一次迭代中考虑这个新位置。如果您不喜欢在 return 语句中赋值，可以使用 each 运算符单独修改 d.y 。
forceCenter 这里会把事情搞砸，我不确定是否有必要。我也怀疑 manyBody 力的必要性 — 为什么圆圈必须相互吸引(您使用正强度 = 吸引力)？最好用轴吸引它们 (forceY)。
在圆的准确 x 位置、x 轴的吸引力和收敛速度(迭代)之间存在折衷。可能需要对力的强度进行一些调整。 d3-force 自述文件中描述了强度的影响:https://github.com/d3/d3-force#x_strength .对于大多数力，建议使用 [0, 1] 范围内的强度。
const width = 500
const height = 150
const svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
const colorScale = d3.scaleOrdinal()
.range(['#FCFCFC', '#F7567C', '#FFFAE3', '#99E1D9', '#5D576B'])
const radius = 7
const sampleData = d3.range(150).map(() => ({r: radius,
value: width/2 + d3.randomNormal(0,75)()}))
// set params for force layout
//const manyBody = d3.forceManyBody().strength(2)
//const center = d3.forceCenter().x((width/2)).y((height/2))
// define force
let force = d3.forceSimulation()
//.force('charge', manyBody)
//.force('center', center)
.force('collision', d3.forceCollide(d => d.r).strength(1))
.velocityDecay(.48)
.force('x', d3.forceX(d => d.value).strength(3))
.force('y', d3.forceY(height - radius).strength(0.2))
.nodes(sampleData)
.on('tick', changeNetwork)
svg.selectAll('circle')
.data(sampleData)
.enter()
.append('circle')
.style('fill', (d,i) => colorScale(i))
.attr('r', d => d.r)
.attr('stroke', 'black')
.attr('stroke-width', .1)
function changeNetwork() {
d3.selectAll('circle')
.attr('cx', d => d.x)
.attr('cy', d => d.y = Math.min(d.y, height - radius - 1))
}<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>关于javascript - 为力导向图创建下限(例如力导向直方图)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51936114/
24
4
0
我是一名优秀的程序员,十分优秀！