javascript - 如何避免散点图d3.js上的点折叠
问题描述
我是 d3 Js 宇宙的新手,我用 json 创建了一个散点图,但是某些点的位置相同,我想把它们并排放置。我尝试将力碰撞与力模拟结合使用,但没有发生任何事情。我遵循了许多带有碰撞碰撞检测的示例散点图
function constructScatterPoint(){
svg = d3.select("#graphDiv").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("g").attr("class", "x axis").attr("transform", "translate(0," + height + ")").call(d3.axisBottom(xScale)).append("text")
.attr("class", "label")
.attr("x", width)
.attr("y", -6)
.style("text-anchor", "end")
.text("Periode")
.attr("stroke","black");
svg.append("g").call(d3.axisLeft(yScale)).append("text")
.attr("class", "label")
.attr("x", 0)
.attr("y", -6)
.text("Durée")
.attr("stroke","black");
const forceX = d3.forceX(width / 2).strength(0.015)
const forceY = d3.forceY(height / 2).strength(0.015)
var force = d3.forceSimulation()
.velocityDecay(0.2)
.force("x", forceX)
.force("y", forceY)
.force("collide", d3.forceCollide().radius(function(d){
return 5 + 0.5;
}).iterations(5))
.nodes(data).on("tick", tickActions);
maintenanceTaskDot=svg.selectAll("dot").data(data).enter().append("circle")
.attr("stroke", "var(--greydark)")
.attr("stroke-width", 1.5)
.attr("r", 5)
.attr("fill", function(d){ if(d.maintenance_work=="A") {return "var(--purple)"}else if(d.maintenance_work=="H"){return "var(--pink)"}return "var(--cyan)"} )
.style("opacity",0.5)
.on('mouseover', showTaskCode.show)
.on('mouseout',showTaskCode.hide)
.on("click", clickOnCircle)
function tickActions(e) {
svg.selectAll("circle")
.attr("cx", xValue)
.attr("cy", yValue)
}
}
解决方案
找到了 !xValue 和 yValue 对应
xScale = d3.scaleLinear().range([0, width]);
yScale = d3.scaleLinear().range([height, 0]);
xValue=function(d){return xScale(d.period)};
yValue=function(d){return yScale(d.duration)};
var force = d3.forceSimulation(data)
.force("x", d3.forceX(xValue))
.force("y", d3.forceY(yValue))
.force("collide", d3.forceCollide().radius(7))
.force("manyBody", d3.forceManyBody().strength(-5))
.velocityDecay(0.8)
.alphaTarget(0.1)
.on("tick", tickActions);
function tickActions(e) {
maintenanceTaskDot
.attr("cx", function(d, i) { return d.x; })
.attr("cy", function(d, i) { return d.y; });
}
推荐阅读
- python - 如果目录名称已经存在,如何使用python批量删除部分文件夹名称并合并内容?
- python - 从名称字符串中删除特定数字和字符
- laravel - 社交名流:使用 Google 客户端登录错误
- awk - 智能搜索和替换
- r - 识别行中的相等值
- python - RDFlib 解析大乌龟文件内存错误
- php - 回声新日期时间();在 wordpress 上导致严重错误
- google-sheets - 与 OR 逻辑一起使用的 CountIFS 的 Google Sheets 替代品是什么?
- ruby-on-rails - ActiveRecord:为什么 has_many 依赖: :destroy 不起作用?
- swift - watchOS didUpdateLocation 在位置更改期间冻结