- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我一直在尝试启动并运行经过修改的蜂群图。它的“特殊”之处在于我试图根据 bool 值拆分 y 值。因此,您可以想象一种双蜂群视觉效果——一个部分在 x 轴上方附加了圆圈,而另一个部分在 x 轴下方附加了圆圈。
我的数据非常简单,但对于上下文这里有一个解释:
所以,如果我们清楚这一点,让我重申一下我的目标。我希望观察在劳动力中的圆圈在 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/
我有一个带有列的表提供者 implied(tiny int)(something like nullable bool) provi
我正在阅读 VideoFileWriter来自 AForge.Video.FFMPEG 的类(class)通过 ILSPY 组装(我很想看看特定方法是如何工作的)并发现了这个: public bool
这是我的完整代码... import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import
我有一个输入 list类型 [Maybe SomeType]和一个谓词 p类型 SomeType -> Bool ,我想回答这个问题“谓词 p 是否适用于所有碰巧在输入中的 SomeType ?”。
使用 !!x 有什么区别吗?对比(bool)x ? 假设__STDC_VERSION__ >= 199901L和 #include 他们都保证结果是0吗?或 1 ,并且无论 x 的大小和值如何,都不
我正在编写一些 C++ 代码,我想调用两个函数(checkXDirty 和 checkYDirty),并返回 true如果任一返回 true。即使一个返回 true 我也需要评估两者,所以我的第一个想
我注意到 bool在 QtCreator 中以不同于其他类型的颜色突出显示: 只有在包含某些 header 时才会发生这种情况,最终我将其追踪到 . QtCreator 的代码检查器似乎无法手动跟踪
有一个函数: func (first: Int) -> Int -> Bool -> String { return ? } 返回值怎么写?我对上面 func 的返回类型感到很困惑。 最
训练神经网络学习“异或” 我正在尝试使用“批量归一化”,我创建了一个批量归一化层函数“batch_norm1”。 import tensorflow as tf import nump
我已经创建了任务函数来验证我的 json 文件。一切正常,直到我没有使用结果。当我试图从 async task function 获得结果时它显示错误为 Cannot implicitly conve
我有一个函数 func login (parameters: [(String, Any)], completion: @escaping (Bool) -> Vo
我正在处理最近从 X/Motif 转移到 Qt 的 C++ 代码库。我正在尝试编写一个 Perl 脚本,它将用 bool 替换所有出现的 Boolean(来自 X)。该脚本只是做了一个简单的替换。 s
嗨,我正尝试创建一个Visiblity小部件,如果用户在Firebase数据库阵列上,该小部件将显示。看起来像这样(成员数组): 如您所见,我创建了一个StreamBuilder,如果当前用户的用户名
我创建了如下的rest api方法, Future activateAccount(int id, int code) async{ final body = {"code": '$c
在我的Flutter应用中,我有一个返回Future的函数,但我想将结果作为Stream。这是函数: Future isGpsOn() async { if (await Geolocat
我可以看到 BOOLEAN 覆盖了 __visit_name__ class BOOLEAN(Boolean): __visit_name__ = 'BOOLEAN' 控制调度员选择的访问者方
考虑以下代码: bool x; bool? y = null; x = y?? true; 将 bool? 分配给 bool 是一个编译时错误,但上面的代码在编译和运行时都成功了。为什么?尽管第三条语
我正在重写一些 Javascript 代码以在 Excel VBA 中工作。由于在这个网站上搜索,我已经设法翻译了几乎所有的 Javascript 代码!但是,有些代码我无法准确理解它在做什么。这是一
我想拍一张bool来自Vec并在 if 语句中进行比较。如何解决以下错误? | 7 | if cell { | ^^^^ expected
我在我的应用程序崩溃跟踪工具中发现了一些崩溃。基本上我有一个 tabBarController,其中一个选项卡有一个嵌入式 UIWebView,另一个选项卡有一个带有 UITableView 的 Co
我是一名优秀的程序员,十分优秀!