gpt4 book ai didi

javascript - Beeswarm 图,根据 bool 值拆分 "swarm"y 值

转载 作者:行者123 更新时间:2023-11-30 11:00:31 25 4
gpt4 key购买 nike

我一直在尝试启动并运行经过修改的蜂群图。它的“特殊”之处在于我试图根据 bool 值拆分 y 值。因此,您可以想象一种双蜂群视觉效果——一个部分在 x 轴上方附加了圆圈,而另一个部分在 x 轴下方附加了圆圈。

我的数据非常简单,但对于上下文这里有一个解释:

  • d.educ = 教育(离散变量,以年为单位)
  • d.inlf = 在劳动力中(如果是,则为 1,如果否,则为 0)

所以,如果我们清楚这一点,让我重申一下我的目标。我希望观察在劳动力中的圆圈在 x 轴上方,我希望观察不在劳动力中的圆圈在 x 轴下方。

下面的代码包含来 self 的完整数据集的 150 个样本(硬编码):

var margins = {top:20, bottom:300, left:30, right:100};

var height = 200;
var width = 900;

var totalWidth = width+margins.left+margins.right;
var totalHeight = height+margins.top+margins.bottom;

var svg = d3.select('body')
.append('svg')
.attr('width', totalWidth)
.attr('height', totalHeight);

var graphGroup = svg.append('g')
.attr('transform', "translate("+margins.left+","+margins.top+")");

var formatValue = d3.format(",d");

var xScale = d3.scaleLinear()
.range([0, width]);
/*
var tsvData = d3.tsv('voronoi-circles.tsv');

tsvData.then(function(rawData) {



var data = rawData.map(function(d) {
return {educ:+d.educ, inlf:+d.inlf}
});
*/

var data = [{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 14.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 16.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 11, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 10.0, 'inlf': 1},
{'educ': 11, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 16.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 13.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 17.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 17.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 11, 'inlf': 1},
{'educ': 16.0, 'inlf': 1},
{'educ': 13.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 16.0, 'inlf': 1},
{'educ': 11, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 10.0, 'inlf': 1},
{'educ': 14.0, 'inlf': 1},
{'educ': 17.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 16.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 16.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 8.0, 'inlf': 1},
{'educ': 10.0, 'inlf': 1},
{'educ': 16.0, 'inlf': 1},
{'educ': 14.0, 'inlf': 1},
{'educ': 17.0, 'inlf': 1},
{'educ': 14.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 14.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 8.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 8.0, 'inlf': 1},
{'educ': 17.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 0},
{'educ': 9.0, 'inlf': 0},
{'educ': 10.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 17.0, 'inlf': 0},
{'educ': 15.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 6.0, 'inlf': 0},
{'educ': 14.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 14.0, 'inlf': 0},
{'educ': 9.0, 'inlf': 0},
{'educ': 17.0, 'inlf': 0},
{'educ': 13.0, 'inlf': 0},
{'educ': 9.0, 'inlf': 0},
{'educ': 15.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 13.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 13.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 16.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 13.0, 'inlf': 0},
{'educ': 10, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 17.0, 'inlf': 0},
{'educ': 14.0, 'inlf': 0},
{'educ': 16.0, 'inlf': 0},
{'educ': 17.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 10, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 17.0, 'inlf': 0},
{'educ': 10.0, 'inlf': 0},
{'educ': 13.0, 'inlf': 0},
{'educ': 10, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 16.0, 'inlf': 0},
{'educ': 17.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 16.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 16.0, 'inlf': 0},
{'educ': 8.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 13.0, 'inlf': 0},
{'educ': 11.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 14.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 17.0, 'inlf': 0},
{'educ': 14.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 9.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 14.0, 'inlf': 0},
{'educ': 16.0, 'inlf': 0}];

xScale.domain(d3.extent(data, function(d) { return d.educ; }));

var simulation = d3.forceSimulation(data)
.force("x", d3.forceX(function(d) { return xScale(d.educ); }).strength(1))
.force("y", d3.forceY(height / 2))
.force("collide", d3.forceCollide(4))
.stop();

for (var i = 0; i < 120; ++i) simulation.tick();

graphGroup.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(xScale).ticks(20, ".0s"));

var cell = graphGroup.append("g")
.attr("class", "cells")
.selectAll("g").data(d3.voronoi()
.extent([[-margins.left, -margins.top], [width + margins.right, height + margins.top]])
.x(function(d) { return d.x; })
.y(function(d) {
if (d.inlf==1) {
return d.y;
} else {
return d.y+300;
}
})
.polygons(data)).enter().append("g");

cell.append("circle")
.attr("r", 3)
.attr("cx", function(d) { return d.data.x; })
.attr("cy", function(d) { return d.data.y; });

cell.append("path")
.attr("d", function(d) { return "M" + d.join("L") + "Z"; });

/*
cell.append("title")
.text(function(d) { return d.data.id + "\n" + formatValue(d.data.value); });
*/
//})
.cells path {
fill: none;
pointer-events: all;
}

.cells :hover circle {
fill: red;
}
<script src="https://d3js.org/d3.v5.min.js"></script>

如您所见,我尝试了一种相当直接的方法,即使用 if 语句将 +300 添加到 y 值。然而,结果并不像预期的那样,并且似乎将所有值都 chop 为 0。不知道为什么。

问题

如何修改圆坐标逻辑以说明我的 bool 值 (d.inlf)?还是不是那么简单;也许应该调用另一个单独的 d3.voronoi()。无论哪种情况,我都不确定如何进行。

最佳答案

我完全不知道你在这里使用 voronoi 的目的是什么,所以我就把它去掉了。

你只需要两件事。首先,确定模拟中的 y 位置:

.force("y", d3.forceY(function(d) {
return d.inlf ? height - 100 : height + 100
}))

然后,设置圆圈的位置:

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

最后,请记住模拟的滴答必须运行多少次的简写,所以这...

for (var i = 0; i < 120; ++i) simulation.tick();

...可以是:

simulation.tick(120);

这是演示:

var margins = {
top: 0,
bottom: 200,
left: 30,
right: 100
};

var height = 150;
var width = 900;

var totalWidth = width + margins.left + margins.right;
var totalHeight = height + margins.top + margins.bottom;

var svg = d3.select('body')
.append('svg')
.attr('width', totalWidth)
.attr('height', totalHeight);

var graphGroup = svg.append('g')
.attr('transform', "translate(" + margins.left + "," + margins.top + ")");

var formatValue = d3.format(",d");

var xScale = d3.scaleLinear()
.range([0, width]);

var data = [{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 14.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 16.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 11,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 10.0,
'inlf': 1
},
{
'educ': 11,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 16.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 13.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 17.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 17.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 11,
'inlf': 1
},
{
'educ': 16.0,
'inlf': 1
},
{
'educ': 13.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 16.0,
'inlf': 1
},
{
'educ': 11,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 10.0,
'inlf': 1
},
{
'educ': 14.0,
'inlf': 1
},
{
'educ': 17.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 16.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 16.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 8.0,
'inlf': 1
},
{
'educ': 10.0,
'inlf': 1
},
{
'educ': 16.0,
'inlf': 1
},
{
'educ': 14.0,
'inlf': 1
},
{
'educ': 17.0,
'inlf': 1
},
{
'educ': 14.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 14.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 8.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 8.0,
'inlf': 1
},
{
'educ': 17.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 9.0,
'inlf': 0
},
{
'educ': 10.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 17.0,
'inlf': 0
},
{
'educ': 15.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 6.0,
'inlf': 0
},
{
'educ': 14.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 14.0,
'inlf': 0
},
{
'educ': 9.0,
'inlf': 0
},
{
'educ': 17.0,
'inlf': 0
},
{
'educ': 13.0,
'inlf': 0
},
{
'educ': 9.0,
'inlf': 0
},
{
'educ': 15.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 13.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 13.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 16.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 13.0,
'inlf': 0
},
{
'educ': 10,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 17.0,
'inlf': 0
},
{
'educ': 14.0,
'inlf': 0
},
{
'educ': 16.0,
'inlf': 0
},
{
'educ': 17.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 10,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 17.0,
'inlf': 0
},
{
'educ': 10.0,
'inlf': 0
},
{
'educ': 13.0,
'inlf': 0
},
{
'educ': 10,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 16.0,
'inlf': 0
},
{
'educ': 17.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 16.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 16.0,
'inlf': 0
},
{
'educ': 8.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 13.0,
'inlf': 0
},
{
'educ': 11.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 14.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 17.0,
'inlf': 0
},
{
'educ': 14.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 9.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 14.0,
'inlf': 0
},
{
'educ': 16.0,
'inlf': 0
}
];

xScale.domain(d3.extent(data, function(d) {
return d.educ;
}));

var simulation = d3.forceSimulation(data)
.force("x", d3.forceX(function(d) {
return xScale(d.educ);
}).strength(1))
.force("y", d3.forceY(function(d) {
return d.inlf ? height - 100 : height + 100
}))
.force("collide", d3.forceCollide(4))
.stop();

simulation.tick(120);

graphGroup.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(xScale).ticks(20, ".0s"));

var circles = graphGroup.selectAll(null)
.data(data)
.enter()
.append("circle")
.attr("r", 3)
.attr("cx", function(d) {
return d.x;
})
.attr("cy", function(d) {
return d.y;
});
.cells path {
fill: none;
pointer-events: all;
}

.cells :hover circle {
fill: red;
}
<script src="https://d3js.org/d3.v5.min.js"></script>

关于javascript - Beeswarm 图,根据 bool 值拆分 "swarm"y 值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58006740/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com